reactjs - 使用 Enzyme 测试无状态 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 上有人建议使用这样的 spy :

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

但这返回了

'TypeError: Cannot read property 'equal' of undefined'.

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

Answer 1

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

我会(对于handleShare):

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

现在介绍handleFavorite:

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

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

希望对您有帮助!