在前端开发中，测试是一个非常重要的环节。对于 React 组件的单元测试来说，Enzyme 是一个非常好用的工具。Enzyme 提供了一系列 API，使得我们能够轻松地测试组件的行为以及渲染结果。
本文将介绍 Enzyme 的使用方法，并结合示例代码进行讲解。
Enzyme 简介
Enzyme 是 Airbnb 开源的 React 测试工具库。它提供了一系列 API，使得我们能够方便地进行组件的单元测试。
Enzyme 可以模拟组件的渲染和交互，提供了类似 jQuery 的选取器 API，使得我们能够方便地测试组件的状态以及事件回调函数的调用情况。
Enzyme 支持三种模拟组件渲染的方式：shallow、mount 和 render。其中，shallow 渲染只会渲染组件本身，而不会深度渲染其子组件；mount 渲染会完全渲染组件及其子组件，并且会连接到真实的 DOM 上；render 渲染和 mount 类似，不过它使用的是 Cheerio 库来生成虚拟 DOM。
接下来，我们将详细介绍 Enzyme 的使用方法。
安装 Enzyme
首先，我们需要安装 Enzyme。在终端中，执行以下命令即可：
npm install --save-dev enzyme enzyme-adapter-react-16
其中 enzyme-adapter-react-16 是适用于 React 16 的适配器，在使用前需要先进行配置。
配置 Enzyme
在使用 Enzyme 前，我们需要进行配置。创建 setupTests.js 文件，在其中添加以下代码：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });测试组件
接下来，我们将通过一个示例来演示 Enzyme 的使用方法。
假设我们有一个名为 LoginForm 的登录表单组件，其代码如下：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- --------- ------- --------- -
------------------ -
-------------
---------- - -
--------- ---
--------- ---
--
-
--------------------------- -
--------------- --------- ------------------ ---
-
--------------------------- -
--------------- --------- ------------------ ---
-
------------------- -
-----------------------
----- - --------- -------- - - -----------
-- ---------- -- ---------- -
-------
-
----------------------------- ----------
-
-------- -
----- - --------- -------- - - -----------
------ -
----- --------------- -- --------------------------
-----
------ -----------------------------------
------
-----------
-------------
----------------
--------------- -- ---------------------------------
--
------
-----
------ -----------------------------------
------
---------------
-------------
----------------
--------------- -- ---------------------------------
--
------
------- -----------------------------
-------
--
-
-
------ ------- ----------该组件接受一个 onSubmit 属性，当用户点击提交按钮时，将会调用该回调函数，并将用户名和密码作为参数传入。
我们需要测试以下几个方面：
- 用户输入时，状态是否更新正确；
- 用户点击提交按钮时，是否会调用
onSubmit回调函数，并传入正确的参数。
接下来，我们将使用 Enzyme 来测试该组件。
测试状态更新
首先，我们将测试用户输入时，组件状态是否更新正确。
在 LoginForm.test.js 文件中，添加以下测试代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --------- ---- --------------
--------------------- -- -- -
------------ ------ -------------- ----------- -- -- -
----- ------- - ------------------ ----
----- ------------- - --------------------------
-------------------------------- - ------- - ------ -------- - ---
----------------------------------------------------
---
------------ ------ -------------- ----------- -- -- -
----- ------- - ------------------ ----
----- ------------- - --------------------------
-------------------------------- - ------- - ------ -------- - ---
----------------------------------------------------
---
---其中，shallow 方法用于进行浅渲染，返回一个 Enzyme 的浅包装器。find 方法用于查找指定选择器的 DOM 元素。simulate 方法用于模拟事件触发。
运行测试命令，我们可以看到测试通过。
测试回调函数
接下来，我们将测试用户点击提交按钮时，是否会调用 onSubmit 回调函数，并传入正确的参数。
在 LoginForm.test.js 文件中，添加以下测试代码：
-- -------------------- ---- ------- ------------ ---- -------------- ---- -------- --- -------- ---- ------ ------ -- --------- -- -- - ----- ------------ - ---------- ----- ------- - ------------------ ----------------------- ---- ----- ------------- - -------------------------- ----- ------------- - -------------------------- ----- ------------ - -------------------------------------- -------------------------------- - ------- - ------ -------- - --- -------------------------------- - ------- - ------ -------- - --- ------------------------------- --------------------------------------------------- ---------- ---
其中，jest.fn() 方法用于创建一个模拟的回调函数，在测试中可以对其进行断言判断。toHaveBeenCalledWith 方法用于判断回调函数是否被调用，并传入了指定的参数。
运行测试命令，我们可以看到测试通过。
总结
Enzyme 是 React 组件单元测试的重要工具之一，它提供了一系列 API，使得我们能够轻松地测试组件的行为以及渲染结果。通过本文的介绍，相信大家已经对 Enzyme 的使用有了一定的了解。
在实际开发中，我们也需要充分利用 Enzyme 来编写组件的单元测试，确保代码的质量和稳定性。
示例代码如下：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- --------- ------- --------- -
------------------ -
-------------
---------- - -
--------- ---
--------- ---
--
-
--------------------------- -
--------------- --------- ------------------ ---
-
--------------------------- -
--------------- --------- ------------------ ---
-
------------------- -
-----------------------
----- - --------- -------- - - -----------
-- ---------- -- ---------- -
-------
-
----------------------------- ----------
-
-------- -
----- - --------- -------- - - -----------
------ -
----- --------------- -- --------------------------
-----
------ -----------------------------------
------
-----------
-------------
----------------
--------------- -- ---------------------------------
--
------
-----
------ -----------------------------------
------
---------------
-------------
----------------
--------------- -- ---------------------------------
--
------
------- -----------------------------
-------
--
-
-
------ ------- ----------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b3d0c968c7c53b0d97614