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

Question

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

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

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

Answer 1

您不应该测试内部（私有）项目，测试内部实现被认为是不好的做法，相反，尝试模拟用户与您的组件的交互。在你的例子中模拟 click on the div.

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

我有一个常用的句子，"If it is hard to test you probably trying to test something wrong"。

Answer 2

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

直接测试功能仍然很有必要。特别是当你的组件很复杂，有几个嵌套组件在你想测试的函数可以是运行.

之前对服务器进行异步调用

在这种情况下 - 您有两个选择，据我所知：

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

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

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

How can i use Jest to test a function inside a stateless component?

reactjs

react-native

jestjs

tdd