在前端开发中，我们经常需要对我们的 React 组件进行测试以保证它们的稳定性和正确性。而 Enzyme 就是一个能够帮助我们快速测试 React 组件的工具，它提供了一系列简单易用的 API ，使我们可以方便地进行组件的渲染和操作。
安装 Enzyme
在开始使用 Enzyme 之前，我们需要先安装它。通过 npm 可以方便地安装 Enzyme：
npm install --save-dev enzyme react-dom enzyme-adapter-react-16
这里我们需要安装 Enzyme 的适配器以配合我们使用的 React 版本。假设我们使用的是 React 16，则我们需要安装 enzyme-adapter-react-16。如果你使用的是其他版本的 React，则需要安装相应的适配器。
配置 Enzyme
我们需要在测试之前对 Enzyme 进行配置。在测试文件中添加以下代码：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });使用 Enzyme 进行浅渲染
我们可以使用 Enzyme 中的 shallow() 方法对组件进行浅渲染，这样就可以在不渲染组件的情况下测试组件的结构和行为。
我们来实现一个简单的示例来演示如何使用 Enzyme 进行浅渲染：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------------------ -------- --- --------- ---
-------- ------------- -
----- - ----- ------- - - ------
------ -
------- ------------------
------
---------
--
-
---------------- ----------- -- -- -
----- ----------- - ----------
----- ------- - --------------- ----------- --- --------------------- ----
---------- ------ ----------- -- -- -
----------------------------------
---
---------- ------ ------ ---- ----------- -- -- -
---------------------------------------------------- -----
---
---------- ---- ------- -------- ---- ------ -- --------- -- -- -
-----------------------------------------
---------------------------------------
---
---在这个示例中，我们创建了一个 Button 组件，它会渲染一个按钮，并在点击按钮时调用传入的 onClick 回调函数。我们使用 shallow() 方法对 Button 组件进行了浅渲染，并对其进行了多个测试。
- 我们使用
toMatchSnapshot()方法测试组件是否正确地渲染出来。 - 对组件的结构的测试，我们使用
find()方法找到按钮元素，并检查其文本内容是否正确。 - 对组件的行为的测试，我们使用
simulate()方法模拟点击按钮，然后检查回调函数是否正确地被调用。
使用 Enzyme 进行完整渲染
除了浅渲染之外，我们也可以使用 Enzyme 中的 mount() 方法对组件进行完整渲染。这意味着组件将会被完整地渲染出来，包括所有的子组件以及它们的行为。
我们来实现一个示例来演示如何使用 Enzyme 进行完整渲染：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ----- - ---- ---------
------ ------- ---- --------------------------
------------------ -------- --- --------- ---
-------- ---------------- -
----- - ------ -------- - - ------
------ -
------ ----------- ------------- ------------------- --
--
-
----- ---- ------- --------------- -
------------------ -
-------------
---------- - -
--------- ---
--------- ---
--
-
------------ - ------ -- ------- -- -
--------------- ------- ------------------ ---
--
------------ - ------- -- -
-----------------------
------------------------
--
-------- -
----- - --------- -------- - - -----------
------ -
----- -----------------------------
-----
------------------------
---------- ---------------- ---------------------------------------- --
------
-----
------------------------
---------- ---------------- ---------------------------------------- --
------
------- -----------------------------
-------
--
-
-
-------------- ----------- -- -- -
----- ------- - ----------- ----
---------- ------ ----------- -- -- -
----------------------------------
---
---------- ------ -------- ----- ----- ---- -------- -- --------- -- -- -
----- ----- - ----------------------------
------------------------ -
------- - ------ ---------- --
---
------------------------------------------------------
---
---------- ------ -------- ----- ----- ---- -------- -- --------- -- -- -
----- ----- - ----------------------------
------------------------ -
------- - ------ -------------- --
---
----------------------------------------------------------
---
---------- ------ ---- ---- ------- ------ ---- ------ -- --------- -- -- -
----- ---- - ---------------------
----------------------- -
--------------- ----------
---
------------------------------------------ --------- --- --------- -- ---
---
---在这个示例中，我们创建了一个带有两个文本输入框和一个提交按钮的表单组件。我们使用 mount() 方法对 Form 组件进行完整渲染，并对其进行了多个测试。
- 我们使用
toMatchSnapshot()方法测试组件是否正确地渲染出来。 - 对输入框的测试，我们使用
find()方法找到输入框元素，并模拟用户输入，然后检查组件的 state 是否正确更新。 - 对表单的测试，我们使用
find()方法找到表单元素，并模拟用户提交表单，然后检查代码是否正确地处理了表单数据。
结论
使用 Enzyme 对 React 组件进行测试是非常方便的，它提供了简单易用的 API 使我们可以快速地对组件进行浅渲染和完整渲染，并测试组件的结构和行为。掌握了 Enzyme 后，我们能够更加方便地开发出可靠的 React 组件，提升我们的工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670259a1d91dce0dc8472ff1