How to unit test React Component shouldComponentUpdate method

Question

I have a React Component that implements the shouldComponentUpdate method and I'd like to unit test it. Ideally I could change some prop or state on the component in a unit test and verify it either re-rendered or not. I am using enzyme if that helps.

Answer 1

I would probably just call shouldComponentUpdate directly.

Something like

const comp = shallow(<Comp {...props} />) const shouldUpdate = comp.instance().shouldComponentUpdate(nextProps, nextState) expect(shouldUpdate).toBe(true/false) 

Trying to test by determining if the component actually rendered/didn't render is probably more trouble than it's worth; I'm not even sure how you would do that using enzyme. You can't really go off of the rendered output, since you would probably not return false from shouldComponentUpdate unless the rendered output was the same as before. So determining if a render occurred or not couldn't come from the output alone.

Testing by calling it directly seems fine to me though. As long as you trust React is going to use your shouldComponentUpdate return value correctly (we have bigger problems if it doesn't), it's safe.

Answer 2

You probably dont want to test shouldComponentUpdate as isolated function when you already know what the outcome is.

As it mentioned in the documentation you can use setProps or setState and this is probably - at least for me - a better approach to expect the exact outcome from your component when updating related values.

In your MyComponent.test.js

import { expect } from 'chai'; import sinon from 'sinon-sandbox'; import { shallow } from 'enzyme';  it('updates when changing state or props', () => {   const wrapper = shallow(<MyComponent />);    const shouldComponentUpdate = sinon.spy(MyComponent.prototype, 'shouldComponentUpdate');    expect(shouldComponentUpdate).to.have.property('callCount', 0);    wrapper.setProps({ propThatWillUpdateTheComp: 'foo' });    // or in case you are testing component update in case of state change   // wrapper.setState({ stateThatWillUpdateTheComp: 'bar' });    expect(shouldComponentUpdate).to.have.property('callCount', 1);    expect(shouldComponentUpdate.returned(true)).to.be.equal(true);  });