Is it possible to stub out or spy on the setState method in React when doing unit tests?

Question

I have the following function in my component:

method(args) {
 fetch(args)
  .then((response) => {
    this.setState({
      element: response
      error: false
    });
  })
  .catch((error) => {
    this.setState({
      error: true
    });
  });
}

I am trying to write a unit test for it so I have mocked out the fetch call using fetch-mock with a custom response. I want to check if the state was updated when this method is called and it doesn't seem to be working. I am using enzyme, expect, and sinon and have been unsuccessful in getting the spy to be called when I set component.setState = sinon.spy or stubbing it out. How can I check to see if setState was called with certain elements or is my approach to unit testing this wrong?

Answer 1

Assuming the method is called when the component mounts and the method has been stubbed, try this:

it('should update state with response', () => {
  const wrapper = mount(<Component />);

  return Promise.resolve().then(() => {
    expect(wrapper.state('error')).to.be.false;
  });
});

Returning a promise allows you to test async behaviour in a less hacky way than using a callback in a setTimeout.

I use sinon for stubs, so I'd have something like this in the test:

sinon.stub(window, 'fetch').resolves(mockedResponse);