Question

假设我有这个组件：

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原声。

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

Answer 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)
...

Answer 2

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

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

这样你就可以确定它被召唤一次。

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

2 个答案: