测试react组件以从其他组件接收方法

Question

我进行了一些研究，但未找到如何测试组件浅层渲染（从props中的其他组件接收功能）的方法。我正在使用酶。

如果只是数据，我可以使用const wrapper = shallow(<Component prop1="data" />)进行测试，但是如果它是来自父组件的方法呢？

Answer 1

您可以模拟函数并检查该方法是否已被调用。 Jest通过使用jest.fn()提供了一种简单的方法。首先创建您的模拟

const mockCallback = jest.fn();

然后浅化使组件传递函数。例如

const wrapper = shallow(<Component prop1={mockCallback} />)

使用查找选择器获取所需的组件并模拟更改或单击

wrapper.find('button').simulate('click');

最后检查该函数是否被调用

expect(mockCallback.mock.calls.length).toBe(1);