React 应用的测试是前端开发中不可避免的部分。而 Enzyme 是一个 React 测试工具库，它可以使得 React 组件的测试更简便、快捷、可靠。在本文中，我们将深入了解 Enzyme，介绍它的基础以及高级用途，提供示例代码以及学习和指导意义。
Enzyme 的基础
Enzyme 是由 Airbnb 开发的一个 React 测试工具库，它提供了一个 API，可以方便地在测试中使用 React 组件。Enzyme 有三种渲染器：shallow、mount、render。
- Shallow 渲染器：用于测试一个 React 组件，但不渲染实际的 DOM 元素。这是一种轻量级渲染器，因为它只渲染组件的顶层元素，而不渲染子组件。
- Mount 渲染器：用于测试一个组件并且渲染实际的 DOM 元素。这种渲染器可以让你测试完整的 React 组件树。它还可以检查组件的生命周期方法。
- Render 渲染器：用于生成 React 组件的静态 HTML。这种渲染器不需要一个 DOM 环境，它将仅渲染组件的静态输出。
Enzyme 的核心是 enzyme 包，可以通过 npm 安装。
npm install --save-dev enzyme
Enzyme 的用法就像是 React 的另外一种语法，可以通过 import 或者 require 来引入 Enzyme：
import { mount, shallow, render } from 'enzyme';const { mount, shallow, render } = require('enzyme');我们将在后面的例子中看到如何使用这些渲染器来测试 React 组件。
测试 React 组件
在本节中，我们将了解如何使用 Enzyme 的不同渲染器来测试 React 组件。
Shallow Rendering
Shallow Rendering 在测试 React 组件时是很有用的。它将仅渲染组件的顶层元素并不会渲染子组件。它能够使你专注于测试一个组件的行为而不用担心它所需要的其他子组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --- ---- --------
--------------- -- -- -
---------- ------ ----------- -- -- -
----- --------- - ------------ ----
------------------------------------
---
---Mount Rendering
如果你想测试一个完整的 React 组件树渲染及生命周期方法，那么 Mount Rendering 是首选选择。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ --- ---- --------
--------------- -- -- -
---------- ------ ----------- -- -- -
----- --------- - ---------- ----
------------------------------------
---
---Render Rendering
如果你想要测试组件输出的静态 HTML，则可以使用 Render Rendering。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ---------
------ --- ---- --------
--------------- -- -- -
---------- ------ ----------- -- -- -
----- --------- - ----------- ----
------------------------------------
---
---模拟事件
在测试 React 组件时，我们不仅需要测试渲染，还需要测试交互。Enzyme 允许我们模拟事件来测试交互。Enzyme 支持所有与 React 元素相关的事件。
模拟点击事件
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ --- ---- --------
--------------- -- -- -
---------- -------- ------- -- ------ ------- -- -- -
----- --------- - ---------- ----
----- ------ - -------------------------
-------------------------
---------------------------------------------
---
---模拟输入事件
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ --- ---- --------
--------------- -- -- -
---------- ------ -------- ------- -- -- -
----- --------- - ---------- ----
----- ----- - -------------------------------------
------------------------ - ------- - ------ ------ - ---
---------------------------------------------------
---
---与 Jest 集成
Enzyme 可以与 Jest 集成使用。Jest 是一个用于编写、运行和自动化测试 JavaScript 的 JavaScript 测试框架。
配置 Jest
要测试 React 组件，我们需要安装 Jest 运行器和转换器，以便 Jest 可以测试基于 JS 的应用程序。做完这些步骤后，我们还需要在 Jest 中配置 Enzyme，以便在测试中正确地使用它。首先，安装下面的依赖项：
npm install --save-dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer identity-obj-proxy
-- -------------------- ---- -------
-- ------------
-
---------- -
------- ------
--
------- -
--------- --------------------
--------------------- -
-------------------------
--
------------------- -
----------------- --------------------
-
-
-// setupTests.js
import '@babel/polyfill';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });配置转换器
在根目录下添加 .babelrc 文件：
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}编写测试用例
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ --- ---- --------
--------------- -- -- -
---------- ------ ----------- -- -- -
----- --------- - ---------- ----
------------------------------------
---
---------- -------- ------- -- ------ ------- -- -- -
----- --------- - ---------- ----
----- ------ - -------------------------
-------------------------
---------------------------------------------
---
---总结
Enzyme 是 React 测试的绝佳选择。它简单、灵活、易于使用，并具有许多可以进行配置的选项。本文已经介绍了 Enzyme 的基础知识以及如何使用各种渲染器和模拟事件来测试 React 组件。此外，我们还研究了如何将 Enzyme 与 Jest 集成使用，以及如何配置相关依赖项来使测试用例能够正确运行。我们希望读者们能够从本文中获得有关 Enzyme 的深入了解和实际操作的技能和知识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64571971968c7c53b09f068b