模拟点击事件并使用 toBeCalled() 得到不是函数错误的错误

Question

这是我尝试测试按钮的点击事件

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()
  })

这是 DOM

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

错在哪里？

Answer 1

测试什么：

检查addItem 函数是否在单击add 按钮时被调用。

为什么测试失败：

你模拟了错误的函数。 addItem 是在您的类中定义的 instance 函数，但您正在测试的是您作为 prop 传递给组件的函数。

如何测试组件中定义的函数/方法：

要么你想观察一个方法被调用，但保留原来的实现，要么模拟实现，但在测试运行后恢复原来的，那么你可以使用jest.spyOn这两者中的任何一个。

如果您只想“监视”对 addItem 函数的调用，但保留原始实现，那么您可以这样做。

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

如果你真的想模拟这个函数，然后恢复原来的实现然后你可以这样做。

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

查看工作实现：https://codesandbox.io/s/mm06k8px4y

请注意，在代码中，我更改了 addItem 实现通过手动绑定到类而不是使用箭头函数（类属性），因为我们需要该函数位于类原型中以便于测试。否则，将导致此错误：Cannot read property '_isMockFunction' of undefined，因为它不存在于类原型中。

此外，“类属性”仍处于试验阶段，不是 ES6 的一部分。

更多详情请参阅：https://github.com/facebook/react/issues/9851