使用 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函数toggle favorite。

我试过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: 无法读取未定义的属性 'equal'。

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

Answer 1

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

我会（对于handleShare ）：

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

现在是handleFavorite ：

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

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

希望能帮助到你！

Answer 2

功能组件中的功能未在原型或功能组件实例上定义，您不能直接监视它们

这里的解决方案是测试各个函数的内部实现

例如，对于handleFavourite函数，您可以模拟 AsynStorage 并传递用于 toggleFavourite 的模拟函数，然后在 TouchableOpacity onPress 模拟中调用它的资产

您可以在这篇文章中查看如何模拟 AsyncStore： 如何使用 Jest 测试异步存储？

const mocktToggleFavourite = jest.fn();
wrapper = shallow(<TripReportFooter {...props} toggleFavourite={mocktToggleFavourite} />);
    wrapper
      .find("TouchableOpacity")
      .at(0)
      .simulate("press");
    expect(mockToggleFavourite).toHaveBeenCalled();

同样，您可以通过首先Share.share然后检查每个条件来测试handleShare的各个功能。例如，您可以在 window.alert 上添加一个间谍，看看它是否被调用

const windowSpy = jest.spyOn(window, 'alert');
wrapper = shallow(<TripReportFooter {...props} toggleFavourite={mocktToggleFavourite} />);
//Simulate event that calls handleShare
// Mock Share to give required result
expect(windowSpy).toBeCalledWith(expectedValue);