我试图弄清楚如何在React-Native应用程序中使用Jest测试“onPress”事件,以便确保调用正确的函数。
我浏览了文档和谷歌,但在React-Native中找不到解决方案。
这是我发现的应该适用于React-Native的enzyme
:
const mockFunc = jest.fn();
const component = mount(<MyComponent onPress={mockFunc} />);
component.simulate('press');
expect(mockFunc).toHaveBeenCalled();
但这不管用。看起来mount
不工作,我得到这样的输出:
参考错误:文档未定义
我尝试使用shallow
,但是当我查看函数的输出时,TouchableOpacity
没有被渲染...你已经猜到了,它也不起作用。不知道该怎么办。
有人找到了在React-Native上测试事件的方法吗?
谢谢
3条答案
按热度按时间ui7jx7zq1#
Enzyme不支持React-Native,因为它的渲染方式不同,并且不使用DOM。这就是为什么你会得到错误
ReferenceError: document is not defined
。您可以查看this issue了解更多信息。React团队目前正在努力在react-test-renderer
中公开一个.find()
方法,以模拟组件上的操作。然后,它应该适用于React/React-native,而不需要DOM环境。有一种方法可以实现(这就是我们公司所做的),即呈现一个扩展
TouchableOpacity
并MaponClick
以调用onPress
的自定义组件。就像这样:在测试代码中,调用
component.simulate('click')
。这是一个黑客,我不知道这样做的后果是什么,但它已经为我们的用例工作。
dgenwo3n2#
您应该使用
shallow
,然后调用.dive()
7cwmlq893#
我能够运行像你在React Native中的问题中描述的测试。以下是我的配置:
package.json
test/jestSetup.js
示例组件:
示例测试
.babelrc