Jest - 传递给子组件的测试方法

Question

我是测试 React 组件的新手，所以我尝试在父组件中测试一些作为 props 传递给子组件的方法。我为此使用 Jest 和 Enzyme。

我的测试：

it('should be able to call myMethod callback', () => {
  const mockFn = jest.fn();
  ParentComponent.prototype.myMethod = mockFn;

  const wrapper = Enzyme.shallow(<ParentComponent />);
  wrapper.find('ChildComponent').props().myMethod();

  expect(mockFn).toHaveBeenCalledTimes(1);
});

测试通过，但 myMethod 未调用（测试未覆盖 myMethod）。

当我使用时：

wrapper.instance().myMethod = mockFn;

代替：

ParentComponent.prototype.myMethod = mockFn;

一切都相反 - myMethod 被调用，但测试失败并出现错误：

expect(jest.fn()).toHaveBeenCalledTimes(1)

Expected mock function to have been called one time, but it was called zero times.

我该如何解决这个问题？提前致谢。

Answer 1

您分配myMethod给一个模拟函数，它不执行任何操作，甚至不执行您的原始myMethod. 当您创建 时jest.fn()，它基本上所做的是创建一个不执行任何操作的虚拟模拟函数。因此，当您调用时wrapper.find('ChildComponent').props().myMethod()，它只会调用该函数，而不是您的myMethod.

您可能想做的是监视您的方法。

jest.spyOn(ParentComponent.prototype, 'myMethod'); // ParentComponent.prototype.myMethod is now a mock function

expect(ParentComponent.prototype.myMethod).toHaveBeenCalledTimes(1); // it works