React 是当今最受欢迎的前端框架之一。它提供了一种声明性的方式来构建组件，这使得代码更加易于理解、维护和重用。但是，在复杂的应用程序中编写和维护 React 组件的单元测试可能是一项挑战。Enzyme 是一个 React 应用程序的测试工具，它使测试 React 组件变得更加容易。
Enzyme 是什么？
Enzyme 是一个由 Airbnb 开发和维护的 React 应用程序的测试工具。它提供了一种简单而强大的方式来测试 React 组件的输出和行为。Enzyme 提供了一个类似 jQuery 的 API，使得查找和操作组件变得更加容易。
Enzyme 主要特点
以下是 Enzyme 的一些主要特点：
- 支持多种 React 组件类型，包括函数式、类、状态化和未状态化组件。
- 提供测试包裹器、挂载器和渲染器的抽象层，使得测试变得更加容易。
- 允许查找组件中的特定元素、调用组件中的方法以及模拟用户交互等。
- 可与多种测试框架（如 Jest、Mocha 和 Jasmine）一起使用。
安装 Enzyme
Enzyme 可以安装为项目的开发依赖项：
npm install --save-dev enzyme enzyme-adapter-react-16
此外，您还需要安装适合您的 React 版本的适配器：
npm install --save-dev enzyme-adapter-react-16
使用 Enzyme 进行测试
接下来，让我们来看一下如何使用 Enzyme 进行测试。为了说明问题，假设我们有以下简单的 React 组件。
-- -------------------- ---- -------
------ ----- ---- --------
----- -------- - -- ---- -- -- -
-----
---------- ------------
------
--
------ ------- ---------测试包裹器
测试包裹器是通过包裹 React 组件来提供实用方法和测试技巧的实用工具。它们可以是 shallow、mount 和 render。
shallow测试包裹器：它只测试一个组件而非其子组件，使用时通过shallow()方法调用。
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ -------- ---- -------------
------------------ ----------- -- -- -
---------- ------ --------- ---- ---- ------ -- -- -
----- --------- - ----------------- ------------ ----
------------------------------------
---
---------- ------ ------- ---- ---- -- ---- ---- -- --- ---------- -- -- -
----- --------- - ----------------- ----
----- ---- - ----------------------------
---------------------------- --------
---
---mount测试包裹器：它测试整个组件树，并将其附加到 DOM 中，使组件中的所有钩子和副作用都会触发。
-- -------------------- ---- -------
------ - ----- - ---- ---------
------ -------- ---- -------------
------------------ ----------- -- -- -
---------- ------ --------- ---- ---- ------ -- -- -
----- --------- - --------------- ------------ ----
------------------------------------
---
---------- ------ ------- ---- ---- -- ---- ---- -- --- ---------- -- -- -
----- --------- - --------------- ----
----- ---- - ----------------------------
---------------------------- --------
---
---render测试包裹器：它针对静态组件生成一个类似于 HTML 的字符串，并对其进行断言，并且没有 DOM 或交互。
-- -------------------- ---- -------
------ - ------ - ---- ---------
------ -------- ---- -------------
------------------ ----------- -- -- -
---------- ------ --------- ---- ---- ------ -- -- -
----- --------- - ---------------- ------------ ----
------------------------------------
---
---------- ------ ------- ---- ---- -- ---- ---- -- --- ---------- -- -- -
----- --------- - ---------------- ----
----- ---- - ----------------------------
---------------------------- --------
---
---查找元素
在 Enzyme 中查找元素非常容易。您可以使用以下方法：
find()方法：它查找符合特定 CSS 选择器的所有元素。first()和last()方法：它们分别选中符合条件的首尾元素。children()方法：它选中子元素。parent()方法：它选中父元素。closest()方法：它查找指定元素的最近父元素。contains()方法：它检查当前元素是否包含指定的后代元素。
-- -------------------- ---- -------
------ - ----- - ---- ---------
------ -------- ---- -------------
------------------ ----------- -- -- -
---------- ------ --------- ---- ---- ------ -- -- -
----- --------- - --------------- ------------ ----
----- -- - ---------------------
--------------------------------- ---------
---
---------- ------ ------- ---- ---- -- ---- ---- -- --- ---------- -- -- -
----- --------- - --------------- ----
----- -- - ---------------------
--------------------------------- --------
---
---模拟用户交互
Enzyme 还提供了模拟用户交互的功能，这在测试需要模拟事件（如点击、输入和鼠标移动）的组件时非常有用。以下是一些常用的方法：
simulate()方法：它模拟事件和设置数据。
-- -------------------- ---- -------
------ - ----- - ---- ---------
------ -------- ---- -------------
------------------ ----------- -- -- -
---------- ------ --------- ---- ---- ------ -- -- -
----- --------- - --------------- ------------ ----
----- ------ - -------------------------
-------------------------
------------------------------------------ ---------
---
---------- ------ ------- ---- ---- -- ---- ---- -- --- ---------- -- -- -
----- --------- - --------------- ----
----- ----- - ------------------------
------------------------ - ------- - ------ ------ - ---
------------------------------------------ --------
---
---结论
Enzyme 是一个非常有用的测试工具，使得测试 React 组件变得更加容易。它提供了一组强大的工具和 API，可以帮助您查找、操作和断言组件的输出和行为。通过掌握 Enzyme，您可以更加自信地编写和维护您的 React 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673429770bc820c58247009a