使用 Jest 在 React-Native 中测试组件行为（点击）

Posted 2023-02-22

【中文标题】使用 Jest 在 React-Native 中测试组件行为（点击）

【英文标题】：Testing component behaviour (click) in React-Native with Jest

【发布时间】：2017-05-11 00:07:04

【问题描述】：

假设我有这个组件：

import React,  Component  from 'react';
import  Text, TouchableWithoutFeedback, View  from 'react-native';

class MyComp extends Component 
  onRowPress() 
    this.myCoolFunction();
  

  myCoolFunction()  
    console.log('hi'); 
  

  render() 
    return (
      <TouchableWithoutFeedback onPress=this.onRowPress.bind(this)>
        <View>
          <Text>Hello World</Text>
        </View>
      </TouchableWithoutFeedback>
    );
  


export default MyComp;

如何模拟 1 次点击“TouchableWithoutFeedback”并确保“myCoolFunction”被准确调用了 1 次？

如果不是必须的，那么我宁愿不添加除 'react-dom' 和 'react-addons-test-utils' 之外的更多依赖项。

我看到很多指南声称这个和那个，但我担心它们已经过时了，我想确保我不会经历一些不必要的变通方法并让我的代码臃肿。

我有最新版本的 jest/react/react native。

编辑：在Jest's official documentation 中，它说可以使用 Enzyme 或 TestUtils 进行 DOM 测试。如何使用 TestUtils 完成此操作？

【问题讨论】：

看看这个来自 React 页面的tutorial。您应该测试的是 Facebook 建议的组件状态，而不是 onClick 是否已执行。现在，如果您在单击按钮后所期望的是正在调用另一个组件，那么您应该模拟该组件。

如您所见，我的 onClick 不会操纵状态。这些也是反应测试，因此更容易访问 DOM。

【参考方案1】：

我知道这个答案不适合您不使用任何其他依赖项的要求，但我认为您不能仅使用 Jest 和 Enzyme 来做到这一点。 Jest 为您提供运行器、断言函数和快照测试，而 Enzyme 执行所有 DOM 操作和事件模拟。但是，要知道您的函数恰好被调用了一次，您将需要其他东西（即间谍）。我们为此使用sinon，如下所示：

...
const onButtonClick = sinon.spy()
const wrapper = shallow(<MyComponent onButtonClick=onButtonClick/>)
wrapper.find(`img`).first().simulate(`click`)
wrapper.find(`img`).first().simulate(`click`)
expect(onButtonClick.calledTwice).toBe(true)
...

【参考方案2】：

我知道您不想添加其他依赖项，但 underscore 库中有一个函数，名为 once

创建一个只能调用一次的函数版本。对修改后的函数的重复调用将无效，返回原始调用的值。

这样你就可以确定它被调用了一次。

【讨论】：

你可能误解了我的意思。我想知道的是如何使用 jest 来模拟对我的组件的点击。