如何使用 Jest 测试无状态组件中的函数？答案

【问题标题】：How can i use Jest to test a function inside a stateless component?如何使用 Jest 测试无状态组件中的函数？
【发布时间】：2019-11-13 01:18:19
【问题描述】：

我需要在我的无状态组件中测试一个函数，源代码如下：

function App(props) {
  const handleItemClick = () => {
    if (true) {
      props.doanything();
    }
  }

  return (
    <div onClick={handleItemClick}>
      App
    </div>
  );
}

【问题讨论】：

标签： reactjs react-native jestjs tdd

【解决方案1】：

正如建议的那样 - 如果您可以通过模拟用户点击来简单地测试您的功能，那么请采用这种方法。但是，说测试内部实现是“不好的做法”是无益且不切实际的。

直接测试函数仍然很有用。尤其是当您的组件很复杂时，有多个嵌套组件在您要测试的功能运行之前对服务器进行异步调用。

在这种情况下 - 你有两个选择，我知道：

将函数移出函数组件范围，导出并测试它（注意，您可能需要传入很多道具，这样看起来很难看）
使用类组件。这样就可以直接引用函数了。

我希望有一个更好的，希望有人会在 cmets 中提出一些建议。

【讨论】：

【解决方案2】：

您不应该测试内部（私有）项目，测试内部实现被认为是不好的做法，而是尝试模拟用户与您的组件的交互。在您的情况下，模拟div 上的单击。

如果您使用Enzyme，您可以通过wrapper.find 获取div，然后div.simulate('click')。

我有一个常用的句子，“如果很难测试你可能会尝试测试错误”。

【讨论】：