使用 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' of undefined'。

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

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： How to test Async Storage with 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);