Enzyme 是一个用来帮助开发人员测试 React 组件的 JavaScript 库。它提供了一系列的 API，可以使你在 Jest, Mocha 和 Chai 等测试工具中，轻松地编写测试用例，检查 React 组件渲染结果的正确性。
在这篇文章中，我将介绍如何在 React 项目中使用 Enzyme 测试工具，并提供一些例子来帮助你快速入手。
安装 Enzyme
Enzyme 是一个 Node.js 模块，可以使用 npm 安装。在项目中安装 Enzyme，你需要先安装 react-dom，这是 Enzyme 依赖的一部分。
npm install --save-dev enzyme react-addons-test-utils react-dom
使用 Enzyme 测试工具
Enzyme 提供了三种测试工具：
shallow: 一个轻量级的测试工具，用于测试组件的渲染输出，而不会测试组件的子组件，适用于测试 UI 部分。mount: 可以将组件完全渲染出来，包括它的子组件，适用于测试交互性功能。render: 和mount差不多，但不需要 DOM 环境，可以在 Node 中测试组件的静态输出。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ------ ------- ---- ---------
------ ----------- ---- -----------------
---------------------- ---- -- -- -
----------- ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---Enzyme 测试 API
find(selector)
find 方法返回一个新的 Enzyme 对象，它包含在选择器中指定的组件。选择器可以是一个字符串、一个组件类或一个 HTML 标签。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- ---------
------ ----------- ---- -----------------
---------------------- ---- -- -- -
--------- --- ------- --- -- --------- -- -- -
----- ------- - -------------------- ----
------------------------------------------
---
---first()
first 方法返回包含在当前 Enzyme 对象中的第一个元素的新 Enzyme 对象。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- ---------
------ ----------- ---- -----------------
---------------------- ---- -- -- -
----------- --- ----- ---------- -- - --------- -- -- -
----- ------- - -------------------- ----
------------------------------------------------------------ ----
---
---simulate(event[, mock])
simulate 方法通过模拟指定的事件，来测试交互性组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- ---------
------ ----------- ---- -----------------
---------------------- ---- -- -- -
------------- - ----- ------- -- -- -
----- ------- - ------------------ ----
-----------------------------------------
-----------------------------------------------------
---
---setProps(newProps)
setProps 方法用于改变 Enzyme 对象的 props 属性，并重新渲染组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- ---------
------ ----------- ---- -----------------
---------------------- ---- -- -- -
----------- ----- --- ------------ -- -- -
----- ------- - -------------------- ------------ ----
---------------------------------------------------
----------------------- --------
-------------------------------------------------
---
---集成 Jest
在创建一个基于 React 的项目时使用 Jest 是一个非常流行的选择，它已经成为 React 官方测试工具的默认选项。下面是使用 Jest 和 Enzyme 的一个例子。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- ---------
------ ----------- ---- -----------------
---------------------- ---- -- -- -
----------- --------- ---- ------ -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---结论
Enzyme 是一个非常好用的测试工具，当你开发大型、复杂的 React 应用时，使用它可以提高你的工作效率，帮助你快速发现并解决问题。在开发过程中，如果你使用了 Enzyme，那么在测试的时候应该更加自信，能够更好地保障应用的可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671df3f82e7021665ef49cf6