63

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?

4 Answers 4

108

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

13
  • Thank you! Looks like that just came out in 19.0.0, just a couple months ago. Can't believe I skipped it over in documentation.
    – seansean11
    Apr 8, 2017 at 14:32
  • Will it actually call the methodName() function in the Component or it's just faking it ?
    – prime
    Sep 12, 2017 at 17:12
  • From the documentation: "Note: By default, jest.spyOn also calls the spied method." facebook.github.io/jest/docs/en/…
    – Jonathan
    Sep 12, 2017 at 19:43
  • 2
    What if the <Component {...props} /> wrapped around with a <Provider>, will this work then ? I'm getting a Cannot read property '_isMockFunction' of undefined'. Not sure it's because of the above reason though.
    – prime
    Sep 27, 2017 at 8:55
  • 1
    To me it seems like you are spying on a method that does not exist and that is why you get the Cannot read property '_isMockFunction' of undefined'.
    – Jonathan
    Sep 27, 2017 at 9:04
23

I know its a bit late, but I came across this and would suggest that to test componentDidMount initiates the call to your nested method that your test should look something like:

Module

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

Test - Good

it('should call methodName during componentDidMount', () => {
    const methodNameFake = jest.spyOn(MyComponent.prototype, 'methodName');
    const wrapper = mount(<MyComponent {...props} />);
    expect(methodNameFake).toHaveBeenCalledTimes(1);
});

If you call componentDidMount then the assertion that methodName was called via componentDidMount is more valid.

Test - Bad

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

By writing the test like this - you call the method and then assert that it was called. Which of course it will have given you just called it.

3
  • 1
    Neither of these tests work for me, can't get it to pass at all
    – Byrd
    Jan 5, 2018 at 1:25
  • Are you passing all the props that your component requires?
    – hloughrey
    Jan 6, 2018 at 18:25
  • 1
    Finally got it working, needed to create an instance for it and forceUpdate on my spy.
    – Byrd
    Jan 8, 2018 at 4:06
0

If you're trying to test public methods being called on componentDidMount (if you're using TypeScript), you'll need to explicitly call the instance's componentDidMount method call, since the public methods aren't defined until after the component is instantiated.

To test something like this:

Code

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

public methodName = () => {
  // some code here
}

Test

it('should call methodName during componentDidMount', () => {
  const wrapper = mount(<MyComponent {...props} />);
  const instance = wrapper.instance();
  jest.spyOn(instance, 'methodName')
  expect(instance.methodName).toHaveBeenCalled();
});
0
const toastMethodSpy = jest.spyOn(sharedMockedOTPComponent, 'toast')
sharedMockedOTPComponent.handleResendOtpFailure(networkError)

//hide loader
expect(sharedMockedOTPComponent.state.showLoader).toBe(false)
//error message in toast should have been shown
expect(toastMethodSpy).toHaveBeenCalledTimes(1)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.