0

This is my attempt to test a button's click event

it('should call addItem when button is clicked', () => {
    const addItem = jest.fn()
    const button = mount(<App onClick={addItem} />)
    //button.find('button').props.onClick()
    //expect(addItem).toBeCalled()
  })

This the DOM

<div className="App">
        <input type="text" onChange={this.changeInput} />
        <button onClick={this.addItem}>Add</button>
      </div>

What's the mistake?

2
  • Try using button.find('button').simulate('click'). Also you might want to rename it from button to something more appropriate like wrapper or component. Dec 13, 2018 at 11:44
  • @AnaLizaPandac almost there, but still can't do assert codesandbox.io/s/mk6r923r8
    – Hoknimo
    Dec 13, 2018 at 14:42

1 Answer 1

1

What to test:

Check if the addItem function is getting called when the add button is clicked.

Why the test failed:

You mocked the wrong function. addItem is an instance function defined in your class but what you're testing is a function you passed as prop to your component instead.

How to test a function/method defined in your component:

Either you want to watch a method be called, but keep the original implementation or mock the implementation, but restore the original later after the test run then you can use jest.spyOn for either of the two.

If you only wanted to “spy” calls to the addItem function, but leave the original implementation in place, then you could do it this way.

it("should call addItem when button is clicked", () => {
  const spy = jest.spyOn(App.prototype, "addItem");
  const wrapper = shallow(<App />);
  wrapper.find("button").simulate("click");

  expect(spy).toHaveBeenCalled();
  // don't forget to clear the spy
  spy.mockClear();
});

If you really want to mock the function, then restore the original implementation afterwards then you can do this.

it("should call addItem when button is clicked", () => {
    const mocked = jest.spyOn(App.prototype, "addItem");
    // override the implementation
    mocked.mockImplementation(() => "mock");
    const wrapper = shallow(<App />);

    wrapper.find("button").simulate("click");
    expect(mocked).toHaveBeenCalled();

    mocked.mockRestore();
  });

See working implementation: https://codesandbox.io/s/mm06k8px4y

Note that in the code, I changed the addItem implementation by manually binding the to the class instead of using arrow functions (class properties) since we need that function to be in the class prototype for easier testing. Otherwise, it would lead to this error: Cannot read property '_isMockFunction' of undefined since it's not present in the class prototype.

Also "class properties" are still experimental and and not part of ES6.

See this for more details: https://github.com/facebook/react/issues/9851

3
  • strange, why I don't see this kind of implementation before? May you guide me to the correct path of frontend unit testing?
    – Hoknimo
    Dec 13, 2018 at 16:42
  • I'll try to help as much as I can with your questions. There's a lot of online resources available on this topic as well so further reading would help. At least, in my case, and practice just like what you're doing now. Dec 13, 2018 at 16:48
  • few questions: i) so you don't use arrow function and use bind(this) for the sake of testing? ii) you will have to write that block of code to test each event? eg. onChange, onClick, that's a lot of work..
    – Hoknimo
    Dec 13, 2018 at 17:38

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.