How can I use Jest to spy on a method call?

Question

I recently wanted to test that some custom method gets conditionally called in the componentDidMount method of a React component.

componentDidMount() {
  if (this.props.initOpen) {
    this.methodName();
  }
}

I'm using Jest as my testing framework, which includes jest.fn() for mocks/spies. I've read that this would be fairly trivial to test with Sinon, by doing something like the following:

sinon.spy(Component.prototype, "methodName");
const wrapper = mount(<Component {...props} />);
expect(wrapper.instance().methodName).toHaveBeenCalled();

I'm trying to recreate this with Jest like so:

Component.prototype.methodName = jest.fn();
const wrapper = mount(<Component {...props} />);
expect(wrapper.instance().methodName).toHaveBeenCalled();

This code fails and throws the following error:

jest.fn() value must be a mock function or spy.
Received:
  function: [Function bound mockConstructor]

Is it possible to test this functionality with Jest? And if so, how?

Answer 1

The key is using jests spyOn method on the object's prototype. It should be like this:

const spy = jest.spyOn(Component.prototype, 'methodName');
const wrapper = mount(<Component {...props} />);
wrapper.instance().methodName();
expect(spy).toHaveBeenCalled();

As found here e.g.: Test if function is called react and enzyme

Please note it is also best practice to clear the spied function after each test run

let spy

afterEach(() => {
  spy.mockClear()
})

https://facebook.github.io/jest/docs/en/jest-object.html#jestclearallmocks