21

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.

Liron Yahdav
  • 10,152
  • 8
  • 68
  • 104
  • I don't think what you're talking about is a unit test, is it? Ideally you should be able to test `shouldComponentUpdate` in isolation. – speckledcarp May 27 '17 at 01:52

2 Answers2

40

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.

TLadd
  • 6,488
  • 2
  • 32
  • 40
  • is it possible to spy for shouldComponentUpdate with mount ? @TLadd – ventro_art Feb 14 '19 at 14:54
  • 1
    Not that I'm aware of. mount isn't really for unit testing. If the logic is particularly complex/important in shouldComponentUpdate, could always export a function from the the file and test it separately, and then shouldComponentUpdate would just call that function as well. – TLadd Feb 15 '19 at 03:41
5

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);

});
Jalal
  • 3,308
  • 4
  • 35
  • 43