Question

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

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

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

Answer 1

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

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

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

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

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

Answer 2

您不应测试内部（私有）项目，这是测试内部实现的一种不好的做法，而不是测试内部实现，而是与用户与组件的交互。在您的情况下，在div上模拟点击。

如果您使用的是https://stackoverflow.com/a/55649563，则可以先依次通过wrapper.find和div.simulate('click')来获取div。

我有一个常用的句子，我经常使用它：“如果很难测试，您可能会尝试测试某些错误的东西。”

我如何使用Jest测试无状态组件中的功能？

2 个答案: