使用酶测试无状态React组件中的功能

Question

我有一个无状态组件：

export default function TripReportFooter(props) {
  const { tripReport, user, toggleFavorite, navigation } = props;


  handleShare = async slug => {
    try {
      const result = await Share.share({
        message: `Check out this Trip Report:\n/p/${slug}/`
      });

      if (result.action === Share.sharedAction) {
        if (result.activityType) {
        } else {
          // shared
        }
      } else if (result.action === Share.dismissedAction) {
      }
    } catch (error) {
      alert(error.message);
    }
  };

  handleFavorite = async id => {
    const token = await AsyncStorage.getItem("token");
    toggleFavorite(id, token);
  };

  return (
    ... // handleFavorite and handleShare called with TouchableOpacities.
  );
}

这里面有两个功能，handleShare和handleFavorite。我要测试这些函数是否被调用，并且还要handleFavorite调用prop函数切换收藏夹。

我尝试过wrapper.instance().handleFavorite()，但是由于它是一个无状态组件，所以它返回null。

接下来，Stack Overflow上的某人建议使用如下间谍程序：

    wrapper = shallow(<TripReportFooter {...props} handleFavorite={press} />);
    wrapper
      .find("TouchableOpacity")
      .at(0)
      .simulate("press");
    expect(press.called).to.equal(true);

但这又回来了

'TypeError：无法读取未定义的属性'等于'。

调用这些函数的正确方法是什么？

Answer 1

您首先需要考虑要测试什么。是实现细节还是与组件的交互？后者是一个更好的心态和立场，所以我要做的是从交互的角度测试组件。

我会（为了handleShare）：

1. 模拟在 share 函数内部调用的 Share 对象方法；
2. 选择我想要点击/触摸的按钮
3. 单击/触摸按钮
4. 断言这些方法已被调用。

现在handleFavorite：

1. 嘲笑AsyncStorage.getItem;
2. 创建一个假toggleFavorite函数，我将其作为 props 传递；
3. 选择我想要点击/触摸的按钮
4. 单击/触摸按钮
5. 断言我的toggleFavorite函数已被调用

如果您想单独测试这些函数，则必须将它们提取到组件的外部并单独测试它们。但我不建议这样做，因为它不干净而且是额外的工作。

希望能帮助到你！