Jest 是一个流行的 JavaScript 测试框架，它广泛应用于 React 应用程序的测试中。在本文中，我们将探讨如何使用 Jest 测试 React 组件，以及一些最佳实践。
安装 Jest
在开始之前，我们需要先安装 Jest。在你的 React 项目中运行以下命令即可：
npm install --save-dev jest
编写测试
接下来，我们将创建一个测试文件来测试我们的 React 组件。假设我们要测试一个简单的组件，它没有任何 props，但可以将呈现的文本中的任何大写字母转换为小写字母，如下所示：
import React from 'react';
const Lowercase = ({ text }) => (
<div>{text.toLowerCase()}</div>
);
export default Lowercase;我们将在 __tests__ 文件夹中创建一个名为 Lowercase.test.jsx 的新文件，来测试这个组件。Jest 将自动为我们找到这个文件夹。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ --------- ---- ---------------
--------------------- -- -- -
---------- ------- --- ------- ------ -- -- -
----- ------- - ---------------- ----------- ------ ----
------------------------------------- --------
---
---我们使用 describe 来定义我们的测试套件的名称，它包含所有的测试用例。在这个例子中，我们只有一个测试用例，它用 it 函数来定义。
我们使用 mount 来将组件渲染到一个虚拟 DOM 中，并能够访问它的呈现输出。我们断言组件渲染的文本是否是我们预期的字符串。
运行测试
现在我们已经有了一个测试文件，我们可以运行 Jest 来执行这个测试并检查是否通过。
我们可以在 package.json 中，在 scripts 对象中添加一个新的命令 test，如下所示：
"scripts": {
"test": "jest"
},然后在控制台运行以下命令：
npm run test
Jest 将自动运行末尾为 .test.js，.test.jsx 或 .spec.js，.spec.jsx 扩展名的文件。
我们应该得到以下输出：
-- -------------------- ---- -------
---- ----------------------------
---------
- ------ ------- --- ------- ---- -----
---- ------- - ------- - -----
------ - ------- - -----
---------- - -----
----- ------
--- --- ---- -------这表示测试通过了。如果测试失败，则会在控制台中显示详细信息和错误消息。
最佳实践
测试应该是可重现的
测试必须可以重现，这意味着每次运行测试时都会得到相同的结果。测试应该与系统的环境和状态无关。为了实现这一点，我们应该避免在测试中使用真实的数据，而应该使用模拟的数据。
测试应该覆盖所有的代码路径
我们应该编写测试来覆盖应用程序中的所有代码路径。这意味着无论是正常情况还是异常情况，都应该进行测试。
使用"快照测试"可以提高效率
快照测试是一种自动化测试，可用于捕获一个组件或页面的呈现输出，并将其保存为静态文件。在将此输出与预期输出进行比较时，可以自动检测组件或页面是否已发生变化。
使用多个断言
在单个测试中编写多个断言是一个很好的实践，因为它可以使测试更简单，更易于理解。
以下是一个例子：
-- -------------------- ---- -------
------------ ------ ----------- -- -- -
----- -------- - -
---- ------
---- -------
--
----- ------- - -------------------- --------------- ----
----------------------------------
----------------------------------------------
----------------------------------------------------
---在这个例子中，我们对组件的渲染输出进行了快照测试，并有两个额外的断言用于检查输出是否包含了期望的值。
结论
使用 Jest 测试 React 组件的过程非常简单，且可以为你的代码库提供极大的价值。我们提出了一些最佳实践，希望能够帮助你编写更好的测试，并提高生产力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674f9f20e884a3e30f2f2392