在 Enzyme 和 Jest 组合下用 React 测试组件
在现代前端开发环境中，React 是目前使用最广泛的开源 JavaScript 库之一。React 可以创建高度专业化的用户界面，可以快速得到反馈并能使整个应用程序保持稳定。但是，在编写复杂的用户界面时，必须经过测试来确保新的更改不会破坏旧有的代码。在这种情况下，前端开发人员通常会使用 Enzyme 和 Jest。本文将介绍如何在 Enzyme 和 Jest 组合下使用 React 测试组件。
什么是 Enzyme 和 Jest？
Jest 是一个 JavaScript 测试框架，是由 Facebook 开发和维护的，它可以为 React 组件创建基础测试。Jest 具有许多特性，例如快速的异步测试、内置的测试运行器和代码覆盖率报告等等。
Enzyme 是由 Airbnb 维护的一个 JavaScript 库，它可以完善 Jest 的 React 组件测试功能。Enzyme 提供了快速、简单且强大的方式：渲染、搜索和操纵虚拟 DOM。可以使用 Enzyme 搜索和检索 DOM 和组件层次，然后模拟各种 DOM 交互。这些功能使测试 React 组件更加方便，无需摆弄 React 实例或依赖真实浏览器环境。
Enzyme 提供了三种用于渲染 React 组件的渲染类型：浅渲染、静态渲染和完全渲染：
- 浅渲染：Enzyme 提供了 Shallow 方法，它可以在不深入渲染组件内部的情况下渲染组件。
- 静态渲染：Static 方法允许开发人员将 React 组件渲染为静态 HTML 字符串，并使用该字符串进行测试。
- 完全渲染：最后， Full 方法可通过模拟完整的 DOM 渲染获取 React 组件。
测试一个简单的组件
首先，我们来测试一个简单的 React 组件。以下是一个用于在页面上输出文本消息的组件：
------ ------ - --------- - ---- --------
----- ------- ------- --------- -
-------- -
-------
-----
------------------------
------
--
-
-
------ ------- --------我们将使用 Jest 和 Enzyme 检查组件是否正常。第一步是将它们安装为依赖项：
--- ------- ------ ------ ----------------------- ------------------- -----------
下一步是将 enzyme 中的适配器添加到 Jest 配置中。在项目的 package.json 档案中找到 jest 段：
------- -
----------------------- -
-----
-----
--
-------------------- -
--------------
-
-在 jest 对象的后面添加下面的代码：
------- -
----------------------- -
-----
-----
--
-------------------- -
--------------
--
--------------------- -
------------------------------
-
-在这里，我们正在告诉 Jest 在运行任何测试之前运行名为 setupEnzyme.js 的文件。接下来，创建一个新的 JavaScript 文件，该文件将设置 Enzyme 和适配器：
------ - --------- - ---- --------- ------ ------- ---- -------------------------- ------ -------------- ----------- -------- --- --------- ---
现在，加载 Message 组件并将它传递到 Shallow 方法中进行测试：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
------------------- -- -- -
----------- ------- ---------- -- -- -
---------------- ----
---
---------- ------- ----------- -- -- -
----- ------- - ---------------- ----------- ------ ----
----- -------------- - -------- ----------
-------------------------------------------------------
---
---在这里，我们正在测试 Message 组件。它有两个测试用例。
第一个测试用例是测试 Message 组件是否可以正确地呈现（调用它时是否崩溃）。Jest 使用 it（测试用例），并使用 expect 进行断言。
第二个测试用例是检查组件是否正确呈现 messageContent。我们可以通过浅查询来获取元素，然后使用內置方法 contains 断言是否已正确呈现消息。
为了运行测试，我们将添加以下脚本到 package.json：
---------- - ------- ------ --
运行 npm test 命令对 Message 组件运行测试。如果测试是成功的，我们将看到类似于这样的输出：
---- -----------------
-------
- ------- ------- -------- -- ---
- ------ ------- ------- -- ---
---- ------- - ------- - -----
------ - ------- - -----结论
Jest 和 Enzyme 是 React 测试的黄金标准。这些库是强大且易于使用的工具，可以帮助前端开发人员测试其代码的质量和可靠性。希望这篇文章能够帮助我们学习如何在 Enzyme 和 Jest 组合下使用 React 测试组件，以使代码保持健康和完好无损。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671228cead1e889fe203142a