Random Ramblings

How to test state in React components?

July 09, 2018 | 2 Minute Read

react   state   redux   jest   enzyme   test state in react   how to test react state in component

Do not test the state!

Although it is tempting to use state() from enzyme to test the value of your component state from jest tests, it is a code smell to do so. Because, state is internal to the component. Testing the new value of state from your unit test is like testing private methods (in java/ruby..).

How else do I test state change?

Now that is a different question.

When writing unit tests in jest/jasmine, it is a good practice to describe the behavior of your component. Tests are documentation after all. state is an internal detail of how you have implemented the functionality.

Example:

class Counter extends Component {
    constructor(props) {
        super(props);
        this.state= {
            count: 1
        };
    }
    
    increment = () => {
        this.setState((prevState) => ({count: prevState.count + 1}));
    }
    
    render() {
          return (
            <div>
                  <h2>Number of votes: {this.state.count}</h2>
                    <p> This is my code. Please upvote!</p>
                    <button onClick={this.increment}>Upvote!</button>
             </div>
            );
    }
}

In the example above, clicking on the button increments the number of votes on screen.

To test this in jest,

it('updates number of votes', () => {
  const wrapper = shallow(<Counter/>);
  
  wrapper.find('button').simulate('click');
  wrapper.update(); // Read: enzyme update
  
  expect(wrapper.find('h2').text()).toEqual('Number of votes: 2');
});

To conclude, use your tests to verify the behavior and not the implementation.

What is your take on testing state changes? Let me know in the comments below! Happy coding :)