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

Question

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

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

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

Answer 1

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

如果您使用的是Enzyme，则可以通过wrapper.find和获取 div div.simulate('click')。

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

Answer 2

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

直接测试函数仍然是一个很好的例子。特别是当您的组件很复杂时，多个嵌套组件在您要测试的功能可以运行之前对服务器进行异步调用。

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

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

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