React 是一个流行的前端框架，它可以用来构建复杂的交互式页面。随着应用程序变得越来越复杂，测试变得越来越重要。Enzyme 是一个用于编写 React 组件测试的工具包，它可以帮助您测试 React 组件的输入、输出、状态和行为。在本文中，我们将介绍如何使用 Enzyme 对 React 组件进行测试，并提供一些技巧和实例。
Enzyme 简介
Enzyme 是一个由 Airbnb 发布的开源 JavaScript 工具包，用于测试 React 组件。它提供了一组简单而强大的 API，可以帮助您模拟组件的渲染和行为。Enzyme 有三个模块：Enzyme Adapter 适配器、Shallow Rendering 浅渲染和 Full DOM Rendering 完全 DOM 渲染。
Enzyme Adapter
Enzyme Adapter 是一个用于适配 React 渲染库的接口。这个适配器允许 Enzyme 使用不同的渲染库来处理组件的渲染。目前，Enzyme Adapter 支持 React 16.x、React 15.x 和 React 0.14.x。根据您的 React 版本，您需要选择相应的适配器来测试您的组件。
浅渲染
Shallow Rendering 是一种渲染技术，它只渲染组件的一层子组件。这个技术不需要使用真实的 DOM，而是使用虚拟 DOM，可以更快速地测试组件的输出和行为。Shallow Rendering 仅测试组件本身而不测试其子组件。如果子组件中有错误或更改，浅渲染将不会检测到这些错误或更改。
完全 DOM 渲染
Full DOM Rendering 是一种使用真实 DOM 进行完整渲染的技术。这种技术可以测试组件及其子组件的输出和行为，并且可以更接近真实环境。但是，Full DOM Rendering 可能更加慢且更难以配置。
使用 Enzyme 进行测试
在本文中，我们将关注使用 Shallow Rendering 进行测试。另外，在本文中，我们将使用 Jest 作为我们的测试运行器。Jest 是一个流行的 JavaScript 测试框架，它有很好的垃圾回收机制，可以更有效地管理内存。
安装 Enzyme 和 Jest
在开始测试之前，我们需要安装 Enzyme 和 Jest：
npm i enzyme jest @babel/preset-env @babel/preset-react identity-obj-proxy -D
enzyme 是 Enzyme 的核心库。 jest 是我们的测试运行器。 @babel/preset-env 和 @babel/preset-react 是 Babel 的预设，用于将 ES6 和 JSX 代码转换为浏览器可用的 JavaScript 代码。identity-obj-proxy 用于帮助 Jest 从 CSS 模块文件中导入对象。
配置 Jest
在创建一个新项目时，我们需要配置 Jest。我们可以在项目的根目录下创建一个 jest.config.js 文件。这是一个 Jest 的配置文件，可以在其中配置 Jest 的选项。
-- -------------------- ---- -------
-------------- - -
-------- -----
----------------- -
----------------- ---------------------
--
---------- -
-------------- --------------------
-------------- ----------------------
--
--在这个文件中，我们设置了以下选项：
verbose：在测试运行时输出详细日志moduleNameMapper：用于帮助 Jest 从 CSS 模块文件中导入对象transform：用于将 ES6 和 JSX 代码转换为浏览器可用的 JavaScript 代码
编写测试
在编写测试之前，我们需要编写一个 React 组件。在本文中，我们将编写一个简单的计数器组件。它有一个状态属性，可以将其增加或减少一。
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- ------- --------------- -
------------------ -
-------------
---------- - -
------ --
--
-
--------------- - -- -- -
----------------------- -- --
------ --------------- - --
----
--
--------------- - -- -- -
----------------------- -- --
------ --------------- - --
----
--
-------- -
------ -
-----
---------------------------
------- -------------------------------------------------
------- -------------------------------------------------
------
--
-
-
------ ------- --------这个组件非常简单：它包含一个状态属性 count、两个方法 handleIncrement 和 handleDecrement 和两个按钮，一个用于增加计数器的值，一个用于减少计数器的值。
接下来，我们将编写一个测试来测试这个组件。在测试中，我们将使用 Enzyme API shallow 渲染组件，并使用 find 查找元素。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
------------------- -- -- -
--- --------
------------- -- -------- - ---------------- ------
----------- ------- ------- -- -- -
-------------------------------------------
---
----------- --------- -------- -- -- -
--------------------------------------------------------
---
----------- --------- -------- -- -- -
--------------------------------------------------------
---
-------------- ----- -- - ---- --------- ------ -- --------- -- -- -
---------------------------------------------------
---------------------------------------
---
-------------- ----- -- - ---- --------- ------ -- --------- -- -- -
---------------------------------------------------
----------------------------------------
---
---在这个测试中，我们首先使用 beforeEach 方法来设置每个测试的实例。然后，我们使用 Enzyme 的 shallow 方法来渲染这个组件。接着，我们编写了四个不同的测试用例：
renders without error测试：测试组件是否成功渲染。renders increment button测试：测试增量按钮是否成功渲染。renders decrement button测试：测试减量按钮是否成功渲染。increments count by 1 when increment button is clicked测试：测试点击增量按钮时计数器是否成功增加。decrements count by 1 when decrement button is clicked测试：测试点击减量按钮时计数器是否成功减少。
这些测试非常简单，它们只测试组件的一些基本的输入、输出和行为。但是，它们提供了一个很好的开始，可以帮助您了解如何使用 Enzyme 进行测试。
结论
使用 Enzyme 对 React 组件进行测试非常有用。它可以帮助您测试组件的输入、输出、状态和行为，并且它提供了一组简单而强大的 API，可以帮助您模拟组件的渲染和行为。在本文中，我们介绍了 Enzyme 的简介、 Enzyme Adapter 适配器、Shallow Rendering 浅渲染和 Full DOM Rendering 完全 DOM 渲染，并提供了一些实例和技巧，帮助您更好地理解如何使用 Enzyme 进行测试。一旦您熟悉了 Enzyme 的使用，您可以轻松地编写组件测试，并确保您的 React 应用程序是健壮和可靠的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674d5b37a336082f254c9919