使用 jest 和 React-testing-library 的测试方法

Question

我可以\xc2\xb4t得到答案，如何无法使用jest和react-testing-library进行反应来到达功能组件内部的方法。

\n\n

我尝试使用酶，但我发现一切都变成了 RTL。

\n\n

import React from "react";\n\nconst simpleComponents = (props) => {\n\n    const simpleMethod = () =>{ \n        // method logic\n    };\n\n    return <h1>test</h1>;\n    };\n}\n\nexport default simpleComponents;\n

\n

Answer 1

您应该尝试仅测试用户在真实浏览器中看到的内容，而不是组件的内部逻辑。这就是react-testing-library所提倡的：编写能够给人信心的测试，因为它们看到/做了真正用户会做的事情。

https://testing-library.com/docs/guiding-principles

遵循这些准则，您应该尝试构建一个测试，该测试触发可见元素（由您的组件呈现）上的用户交互，并且涉及 simpleMethod 的执行。

这是react-testing-library查询的全部要点：getByText、getByPlaceholder、getByRole：真实用户会看到的东西，隐藏内部逻辑。但我想你可以用酶来采用这种方法（我从未使用过酶）。

使用这种方法编写测试会减少测试次数，但会增强测试强度，恕我直言，这是一件好事。它与传统的单元测试（例如在 Java 上下文中）有很大不同，在传统的单元测试中测试函数、输入、输出......

事实上，你的 React 组件是一个函数，它的输入是用户交互，它的输出是 DOM。

Answer 2

simpleMethod函数定义在simpleComponentsSFC 的私有范围内。它没有公开，因此您无法在simpleComponents.

但你可以间接测试它，例如：

const simpleMethod = () =>{ 
  console.log('method logic');
};

click首先，您需要使用诸如,之类的事件submit来触发它。我们添加一个console.log方法，这样我们就可以监视该console.log方法，以检查simpleMethod函数是否被调用。