Enzyme 是 Facebook 推出的一款 React 组件测试工具，它提供了方便、易用、灵活的 API，使得测试变得更加容易和高效。在本文中，我们将介绍 Enzyme 的基本用法和一些技巧和提示，以便更好地测试 React 组件。
安装和配置
在使用 Enzyme 之前，我们需要先安装它。可以通过 npm 来进行安装：
--- ------- ---------- ------ -----------------------
其中，enzyme-adapter-react-16 是 Enzyme 针对 React 16.x 版本的适配器，如果使用其它版本的 React，需要安装相应的适配器。
接下来，我们需要在测试文件中引入 Enzyme 并配置适配器。以 Jest 为例，可以在 setupTests.js 文件中添加以下代码：
------ ------ ---- --------- ------ ------- ---- -------------------------- ------------------ -------- --- --------- ---
这样就完成了 Enzyme 的安装和配置。
基本用法
在测试 React 组件时，我们通常需要对组件的渲染结果和行为进行断言。Enzyme 提供了三种渲染方式，分别是浅渲染（Shallow Rendering）、完全渲染（Full DOM Rendering）和静态渲染（Static Rendering）。
浅渲染
浅渲染是指只渲染组件本身，不渲染其子组件。这种渲染方式的优点是速度快，但缺点是测试的覆盖范围有限。可以使用 shallow 方法进行浅渲染：
------ - ------- - ---- --------- ----- ------- - -------------------- ----
在得到 wrapper 后，我们可以通过 wrapper.find 方法来查找组件内的元素，通过 wrapper.props 方法来获取组件的属性，通过 wrapper.state 方法来获取组件的状态。例如：
------------------------------------------------- -------------------------------------- -------- ------------------------------------------
完全渲染
完全渲染是指渲染整个组件树，包括子组件。这种渲染方式的优点是能够测试整个组件的行为，但缺点是速度较慢。可以使用 mount 方法进行完全渲染：
------ - ----- - ---- --------- ----- ------- - ------------------ ----
在得到 wrapper 后，我们可以通过 wrapper.find 方法来查找组件内的元素，通过 wrapper.props 方法来获取组件的属性，通过 wrapper.state 方法来获取组件的状态。与浅渲染不同的是，完全渲染还可以通过 wrapper.instance() 方法来获取组件实例，进而测试组件的方法。例如：
------------------------------------------------- -------------------------------------- -------- ------------------------------------------ ---------------------------- -------------------------------------------
静态渲染
静态渲染是指将组件渲染为静态 HTML 字符串，不包含任何交互逻辑。这种渲染方式的优点是速度最快，但缺点是无法测试交互逻辑。可以使用 render 方法进行静态渲染：
------ - ------ - ---- --------- ----- ------- - ------------------- ----
在得到 wrapper 后，我们可以通过 wrapper.find 方法来查找组件内的元素，但无法获取组件的属性和状态。例如：
-------------------------------------------------
技巧和提示
除了基本用法之外，Enzyme 还提供了一些技巧和提示，帮助我们更好地测试 React 组件。
使用 describe 和 it 组织测试用例
在编写测试用例时，可以使用 describe 和 it 来组织测试用例，使得测试更加清晰和易读。例如：
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---------- ------ ------ ----- ----------- -- -- -
----- ------- - -------------------- ----
------------------------------------------
----------------------------
-------------------------------------------
---
---使用 beforeEach 和 afterEach 执行公共操作
在编写测试用例时，有些操作需要在每个测试用例中都执行，例如创建组件实例、清空组件状态等。可以使用 beforeEach 和 afterEach 来执行这些公共操作，避免重复代码。例如：
----------------------- -- -- -
--- --------
------------- -- -
------- - -------------------- ----
---
------------ -- -
------------------ ------- ---- ---
---
---------- ------ ----------- -- -- -
----------------------------------
---
---------- ------ ------ ----- ----------- -- -- -
------------------------------------------
----------------------------
-------------------------------------------
---
---使用 jest.fn 模拟函数调用
在测试组件的交互逻辑时，有些操作需要调用外部函数，例如调用 API、发送事件等。可以使用 jest.fn 来模拟这些函数调用，避免对外部环境造成影响。例如：
----------------------- -- -- -
---------- ---- ----------- ---- ------ -- --------- -- -- -
----- ----------- - ----------
----- ------- - -------------------- --------------------- ----
-----------------------------------------
---------------------------------------
---
---使用 enzyme-to-json 生成快照
在测试组件的 UI 时，有时候需要生成 UI 快照，以便进行比较。可以使用 enzyme-to-json 来将 Enzyme 的渲染结果转换为 JSON 格式，以便生成快照。例如：
--- ------- ---------- --------------
------ - ------- - ---- --------- ------ ------ ---- ----------------- ----- ------- - -------------------- ---- ------------------------------------------
示例代码
下面是一个完整的测试用例，用于测试一个简单的计数器组件：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
------------------- -- -- -
--- --------
------------- -- -
------- - ---------------- ----
---
---------- ------ ----------- -- -- -
----------------------------------
---
---------- -------- ----- ---- ------ -- --------- -- -- -
------------------------------------------------
-----------------------------------------
------------------------------------------------
---
---总结
Enzyme 是一款非常实用的 React 组件测试工具，它提供了丰富的 API 和一些技巧和提示，使得测试变得更加容易和高效。在编写测试用例时，我们应该使用合适的渲染方式、组织测试用例、执行公共操作、模拟函数调用和生成快照，以便更好地测试 React 组件。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/667e5264dc1ed1a61bd9d7ab