Enzyme 是 React 的一个测试工具，它为我们提供了一系列方法来模拟 React 组件的渲染和交互，使得我们可以轻松地编写测试用例，进而保证代码的质量和稳定性。本文将介绍 Enzyme 的基本用法及常见场景，帮助初学者快速上手。
安装
在使用 Enzyme 之前，我们需要先安装它。Enzyme 的安装分为两部分：安装 Enzyme 本身和安装适配器（Adapter）。
--- ------- ---------- ------
然后根据 React 的版本选择不同的适配器，如下所示：
- React 16+：@enzyme-adapter-react-16
- React 15.5-：@enzyme-adapter-react-15
以 React 16+ 为例，我们需要执行以下命令安装适配器：
--- ------- ---------- ------------------------
配置
安装完 Enzyme 和适配器之后，我们需要进行配置。在项目的根目录下创建一个 setupTests.js 文件，并添加以下代码：
------ ------ ---- --------- ------ ------- ---- --------------------------- ------------------ -------- --- --------- ---
这样，所有的测试用例都可以使用 Enzyme 了。
浅渲染（Shallow Rendering）
浅渲染是 Enzyme 最基本的功能之一，它可以帮助我们快速渲染一个组件，并获取其内部的元素和状态。下面是一个简单的示例：
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- ---------------------------
------------------ -------- --- --------- ---
-------- ------------------ -
------ ------------------------
-
----------------------- -- -- -
---------- ------ ---- ----------- -- -- -
----- ------- - -------------------- ------------ -------- ----
----------------------------------- ----------
---
---在上面的代码中，我们定义了一个名为 MyComponent 的组件，并使用 shallow 方法将其浅渲染。然后我们断言组件渲染后的文本内容是否为 'Hello, Enzyme!'。
完全渲染（Full Rendering）
相比于浅渲染，完全渲染可以更加真实地模拟组件的生命周期和交互。我们可以使用 mount 方法将组件完全渲染，如下所示：
------ ----- ---- --------
------ ------- - ----- - ---- ---------
------ ------- ---- ---------------------------
------------------ -------- --- --------- ---
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
-
------------- -
--------------- ------ ---------------- - - ---
-
-------- -
------ -
-----
------------------------------
------- ----------- -- ------------------------- -----------
--------- ----------------------
------
--
-
-
----------------------- -- -- -
---------- ------ ---- ----------- -- -- -
----- ------- - ------------------ ------------ -------- ----
------------------------------------------------ ----------
---
---------- ------ ----- ----------- -- -- -
----- ------- - ------------------ ----
-----------------------------------------
--------------------------------------------- ----
---
---在上面的代码中，我们定义了一个名为 MyComponent 的组件，并使用 mount 方法将其完全渲染。然后我们分别测试了组件渲染后的文本内容和点击按钮后状态的变化。
快照测试（Snapshot Testing）
快照测试是一种非常实用的测试方法，它可以帮助我们检测组件的渲染结果是否发生了变化。Enzyme 提供了 toMatchSnapshot 方法来实现快照测试，如下所示：
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- ---------------------------
------------------ -------- --- --------- ---
-------- ------------------ -
------ ------------------------
-
----------------------- -- -- -
---------- ----- ---------- -- -- -
----- ------- - -------------------- ------------ -------- ----
----------------------------------
---
---在上面的代码中，我们使用 toMatchSnapshot 方法检测组件的渲染结果是否与之前保存的快照一致。如果不一致，测试将会失败，并提示我们更新快照。
总结
本文介绍了 Enzyme 的基本用法及常见场景，帮助初学者快速上手。Enzyme 还有很多其他的方法和功能，可以根据实际需要进行学习和使用。通过使用 Enzyme，我们可以更加方便地编写测试用例，提高代码的质量和稳定性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66402898d3423812e4e4d03f