CODEWITHSUNDEEP
reactjsunit-testingtestingreduxjestjs
Arga Aditya
Arga Aditya

Reputation: 191

Get The State of Connected Components in Jest & Enzyme

Good day people! Let's say that i have this component Class:

@connect(
  state =>({
    someState: state.oneLevel.response
  })
)
export default class SomeClass extends React.Component{
constructor(props){
  super(props)
  this.state ={
    someState: [],
    isLoading: false,
    isLoaded: false
  }
}
}

This component has an async call with superagent

componentDidMount(){
 var url = 'someapi.com/somedatatofetch'
 this.setState({isLoading: true})
 request.get(url)
 .set('some headers 1', 'somevalue')
 .set('some headers 2', 'somevalue')
 .then((success) => {
      this.setState({
        isLoading: false,
        isLoaded: true
      })
 })
}

Now I've been assigned to write a unit test for this Component to check whether it has successfully changed its state or not. I'm using Jest as my test framework and enzyme for handling DOM Renderer etc.

describe("Network Functionality", ()=>{
  const wrapper = mount(<Provider store={store}><SomeComponent /><Provider>)
  
  it("Should change the isLoaded state to true", ()=>{
    const expectedState = true
    //mocking with supertest
    return mockApi().get('testapi.com/someroute')
    .set('some-headers1', 'somevalue')
    .set('some-headers2', 'somevalue')
    .then((success) => {
    expect(wrapper.state(isLoaded)).toEqual(expectedState)
    })
  }
})

With that code the response is as follows: TypeError: Cannot read property 'isLoaded' of null

my question is, is there anyway to get the state using connected components? I've tried exporting the component as ConnectedComponents and {Components} and it works flawlessly but I want to use connected components.

Why did I want to use connected components? Because the every components of my applications is built using this scheme and its not feasible to export as ConnectedComponents and {Components} for there is so many components within my applications and it might leads to more problems

Upvotes: 2

Views: 1827

Answers (1)

Arga Aditya
Arga Aditya

Reputation: 191

I've managed to solve this problem by finding the Node component using wrapper.find('SomeComponent') if you console.log() it, you'll see that it will yields the component nodes along with the states. This is my final code

describe("Network Functionality", ()=>{
  const wrapper = mount(<Provider store={store}><SomeComponent /><Provider>)
  
  it("Should change the isLoaded state to true", ()=>{
    const expectedState = true
    var somecomponent = wrapper.find("SomeComponent")
    //mocking with supertest
    return mockApi().get('testapi.com/someroute')
    .set('some-headers1', 'somevalue')
    .set('some-headers2', 'somevalue')
    .then((success) => {
    expect(somecomponent.getNode().state.isLoaded)toEqual(expectedState)
    
    })
  }
})
as you can see I'm making another variable to contain the SomeComponent search result. And finally, i called the getNode() function to get the SomeComponent along with its states. I did not know whether this is the best practice or not but it works. I'd love some feedback tho if there's a better way of doing this

Upvotes: 3

Related Questions