React 是一款流行的 JavaScript 框架，使得构建复杂且交互性强的用户界面变得更加容易。然而，随着 React 组件的不断增多，测试这些组件的过程也变得更加复杂。Enzyme 是一个 JavaScript 测试工具，它为开发人员提供了一种方便和简单的方式来测试 React 组件，可以大大提高我们测试的效率。本文将详细介绍如何使用 Enzyme 测试 React 组件，包括如何安装和使用以及使用的一些辅助方法。
Enzyme 安装和基础介绍
首先，让我们介绍一下如何安装 Enzyme。您可以使用 npm 或 yarn 进行安装，安装命令如下所示：
--- ------- ---------- ------
或者
---- --- ----- ------
Enzyme 是由 Airbnb 开发的一个基于 React 的 JavaScript 测试实用工具库，支持 React 16 及以上版本。Enzyme 中包含了多个模块，我们通常只需要使用三个模块：Enzyme、Enzyme-Adapter-React 和 React-DOM。（注：如果您使用的是 React-Native 而非 React，只需要 import Enzyme 和 Enzyme 中的对应 Adapter 即可）
Enzyme 需要添加一个 Adapter，以将 React 组件渲染成虚拟 DOM（virtual DOM）。这里我们选择 Enzyme-Adapter-React16。
在您的测试文件之前，添加以下代码：
------ ------ ---- --------- ------ ------- ---- -------------------------- ------ ----- ---- -------- ------ -------- ---- ------------ ------------------ -------- --- --------- ---
这是 Enzyme 配置的基本形式，它将引入 Enzyme, Adapter 和 React-DOM。最后一步是向 Enzyme 提供适配器（adapter），这里使用了 React 16 适配器。
使用 Shallow 浅渲染器
Shallow 是 Enzyme 中的一个丰富的辅助方法，它可以将 React 组件渲染为一个虚拟 DOM，而不是渲染它的子组件。这样，我们就可以对组件本身进行测试，而不必担心测试其他子组件中的问题。相比较于渲染整个组件树，Shallow 只是渲染了一层，从而使测试变得更加方便和简单。
以下是 Shallow 的基本使用方式：
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
------------------ -------- --- --------- ---
----------------------- -- -- -
----------- ------- ---------- -- -- -
-------------------- ----
---
---在这个例子中，我们以 MyComponent 作为示例组件，使用 shallow 方法渲染了这个组件。这里的断言是，组件能够成功地渲染，没有抛出任何错误。
Shallow 也提供了一系列可用的方法，用于检查组件的属性、状态和虚拟树的结构。例如，在上面的例子中，我们可以使用 .find() 方法找到组件中的元素，并使用 .text() 方法确认是否正确地渲染了某些文本。以下是一些常用的方法：
.find(selector)
返回与给定选择器（selector）匹配的一组元素。例如：
----- ------- - -------------------- ---- ----- -------------- - ---------------------------------
这会返回包含类名为 ".welcome-message" 的元素的 ShallowWrapper 实例。
.at(index)
返回位于给定索引（index）处的元素。例如：
----------------------------
这会返回按钮组的第二个实例。
.prop(key)
返回包含给定键（key）的属性的值。例如：
----- ------- - -------------------- ---------- ---- ---- ----- -------- - ---------------------
这会返回 "John Doe"。
.state(key)
返回给定键（key）的状态值，通常在模拟事件时使用。例如：
----- ------- - -------------------- ---- ------------------ ------ - --- ----- ----- - -----------------------
这会返回 5。
使用 Mount 完全渲染器
相对于 Shallow，Mount 是更深度的渲染器。它可以渲染 React 组件的子组件，可以模拟真实的 DOM 环境。这使得 Mount 可以检查组件之间的交互，以及测试子组件是否正确传递了参数。
以下是使用 Mount 检查子组件传递参数的示例：
------ ------- - ----- - ---- ---------
------ ------- ---- --------------------------
------ --------------- ---- --------------------
------ -------------- ---- -------------------
------------------ -------- --- --------- ---
--------------------------- -- -- -
---------- ----- -- ----- ----------- -- -- -
----- ------- - ---------------------- ----
----- -------- - ------------------------------------------
------------------------------- ---------
---
---在这个例子中，我们使用 Mount 渲染了一个父组件和一个子组件。通过查找子组件，我们可以获取传递给子组件的 props，并验证它们是否正确传递。这个测试确保 ChildComponent 可以正确地接收和处理 props。
使用 Render 静态渲染器
最后，Render 是 Enzyme 的另一个渲染方法，它是更加静态的并与静态渲染器非常接近。Render 渲染的是最终的产物，它返回的是 HTML 字符串，而不是虚拟 DOM 或真实的 DOM 元素。
以下是 Render 的简单示例代码：
------ ------- - ------ - ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
------------------ -------- --- --------- ---
----------------------- -- -- -
----------- --- --------- ------ ------- - --------- -- -- -
----- --------- - ------------------- ----
------------------------------------
---
---在这个例子中，我们使用 Render 渲染了组件，并使用 Jest 的 snapshot 方法来比较它。我们可以通过对 Render 的快照进行比较，对组件产生的最终输出进行检查，以确保我们预期中的 HTML 结构是否正确。
结论
Enzyme 实际上是 React 测试过程中的重要工具，可以让我们更加轻松地进行单元测试。它提供了将 React 组件渲染为虚拟 DOM 的方法，然后允许我们在组件的内部进行检查。在本文中，我们介绍了 Enzyme 的一些主要方法，包括 Shallow、Mount 和 Render，这些方法可以帮助我们有效地测试 React 组件，从而使我们更能放心地编写代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670f05935f5512810262ae74