Question

我是测试React组件的新手，所以我正在尝试测试父组件中的一些方法，这些方法作为道具传递给子组件。我为此使用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

开玩笑-传递给子组件的测试方法

1 个答案: