简介
在前端开发中，如何保证代码的质量和稳定性一直是一个重要的问题。而在 React 开发中，我们可以通过使用测试来解决这个问题。Enzyme 就是一个非常好用的 React 测试框架，可以帮助我们快捷地编写测试代码，提升项目的可维护性和稳定性。
本文将带你入门 Enzyme，让你能够使用它对 React 组件进行测试。我们会从安装 Enzyme 开始，然后介绍其常用的 API 和使用方法。
安装
安装 Enzyme 很简单，使用 npm 即可：
npm install --save-dev enzyme enzyme-adapter-react-16
其中，enzyme-adapter-react-16 是 Enzyme 针对 React 16 的适配器，如果你的 React 版本不同，需要安装相应版本的适配器。
API
Enzyme 提供了三个级别的 API：
- Shallow：浅渲染，只渲染当前组件，不渲染子组件；
- Mount：完全渲染，渲染当前组件和所有子组件；
- Render：静态渲染，只渲染组件的 HTML。
接下来我们会分别介绍这三个级别的 API。
Shallow API
Shallow API 只渲染当前组件，不渲染子组件。这种渲染方式可以提高测试性能，同时也可以隔离当前组件与子组件的影响。
使用 shallow 方法可以创建一个 ShallowWrapper 对象，我们可以通过这个对象来操作渲染出的组件。
例如，我们有一个名为 Button 的组件：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ------------- -
------ -
------- ------------------------
------------
---------
--
-
------ ------- -------我们可以使用 shallow 方法来测试：
-- -------------------- ---- -------
------ ------ ---- -----------
------ - ------- - ---- ---------
------------------ -- -- -
---------- ------ ----------- -- -- -
----- ------- - --------------- ----------- ---- ----
------------------------------------
---
---In the above example, we create a shallow wrapper of our Button component using the shallow method. Then we check if the component exists by calling the exists method of the wrapper.
在上面的例子中，我们使用 shallow 方法创建了一个 Button 组件的浅渲染对象 wrapper。然后我们通过调用 wrapper 的 exists 方法来判断组件是否存在。
Mount API
Mount API 会完全渲染当前组件及其子组件。这种渲染方式可以更全面地测试组件，包括其子组件的交互、渲染行为等。
使用 mount 方法可以创建一个 ReactWrapper 对象，我们可以通过这个对象来操作渲染出的组件。
例如，我们有一个名为 App 的顶层组件，它包含一个 Button 组件：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------ ---- -----------
-------- ----- -
----- -------- ---------- - ------------
----- ----------- - -- -- -
---------------- - ---
--
------ -
-----
--------- ------------
--------- -- ------- ------------
------- ----------- ---- --------------------- --
------
--
-
------ ------- ----我们可以使用 mount 方法来测试：
-- -------------------- ---- -------
------ --- ---- --------
------ - ----- - ---- ---------
--------------- -- -- -
---------- ------ ------ ----- ---- ------ -- --------- -- -- -
----- ------- - ---------- ----
--------------------------------------------- -- ------- ----
-----------------------------------------
--------------------------------------------- -- ------- ----
---
---在上面的例子中，我们使用 mount 方法创建了一个 App 组件的完全渲染对象 wrapper。然后我们找到 Button 组件的 button 元素，模拟点击事件，再次查找数量变化后的 p 元素。
注意，mount 方法会创建一个完整的渲染树，测试性能相对较慢，如果只需要测试当前组件，则推荐使用 shallow 方法。
Render API
Render API 会静态渲染组件，生成组件的 HTML，但不会返回 React 组件实例。这种渲染方式可以测试组件是否按照预期生成 HTML 标记。
使用 render 方法可以创建一个 CheerioWrapper 对象，我们可以通过这个对象来操作渲染出的 HTML。
例如，我们有一个名为 ListItem 的组件：
-- -------------------- ---- -------
------ ----- ---- --------
-------- --------------- -
------ -
--- ----------------------- - -------- - ----
-- -----------------------------------
-----
--
-
------ ------- ---------我们可以使用 render 方法来测试：
-- -------------------- ---- -------
------ -------- ---- -------------
------ - ------ - ---- ---------
-------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ---------------- -------- ------------ ------------- ----
---------------------------------------------
-------------------------------------------------
----------------------------------------------
---
---在上面的例子中，我们使用 render 方法创建了一个 ListItem 组件的静态渲染对象 wrapper。然后我们断言生成的 HTML 是否符合预期。
使用方法
在介绍 Enzyme 的使用方法之前，我们需要了解 React 组件的测试分为两种类型：
- 单元测试：测试组件是否渲染正确，是否正确响应用户事件等；
- 集成测试：测试组件之间的互动是否正常，通过模拟用户事件来测试整个应用是否能正常工作。
根据测试类型的不同，我们可以使用不同的渲染方法和断言。下面我们会分别介绍这两种测试的使用方法。
单元测试
单元测试是针对单个组件的测试，测试的重点在于组件本身的渲染和行为。在 Enzyme 中，我们可以使用 shallow 和 mount 方法来进行单元测试。在断言方面，我们可以使用 expect 来断言组件的状态和行为是否符合预期。
例如，我们有一个简单的计数器组件：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
----- --------------- - -- -- -
-------------- - ---
--
----- --------------- - -- -- -
-------------- - ---
--
------ -
-----
--------- -----------
------- ------------------------------------
------- ------------------------------------
------
--
-
------ ------- --------我们可以使用 shallow 方法来测试它的渲染和行为：
-- -------------------- ---- -------
------ ------- ---- ------------
------ - ------- - ---- ---------
------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ---------------- ----
--------------------------------------------- ----
----------------------------------------------
---
---------- --------- ----- ---- --------- ------ -- --------- -- -- -
----- ------- - ---------------- ----
--------------------------------------------- ----
-----------------------------------------------
--------------------------------------------- ----
---
---------- --------- ----- ---- --------- ------ -- --------- -- -- -
----- ------- - ---------------- ----
--------------------------------------------- ----
-----------------------------------------------
--------------------------------------------- -----
---
---在上面的例子中，我们使用 shallow 方法创建了一个 Counter 组件的浅渲染对象 wrapper。然后我们断言组件是否符合预期，例如 Count 是否显示为 0，按钮数量是否为 2 等。
我们可以通过 wrapper.find(selector) 来查找组件中的元素，通过 wrapper.simulate(event[, mock]) 来模拟触发事件。在触发事件后，我们再次断言组件状态是否符合预期。
集成测试
集成测试是针对整个应用的测试，测试的重点在于多个组件之间的交互和状态。在 Enzyme 中，我们可以使用 mount 方法来进行集成测试。在断言方面，我们可以使用 expect 来断言组件的行为是否符合预期。
例如，我们有一个 TodoList 应用，它包含一个 AddTodo 组件和一个 TodoList 组件：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------- ---- ------------
------ -------- ---- -------------
-------- ------------- -
----- ------- --------- - -------------
----- ------------- - ------ -- -
----- ------- - - --- ----------- ---- --
------------------- ----------
--
------ -
-----
-------- ------------------------- --
--------- ------------- --
------
--
-
------ ------- ------------我们可以使用 mount 方法来测试它的渲染和行为：
-- -------------------- ---- -------
------ ----------- ---- ----------------
------ - ----- - ---- ---------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ------------------ ----
----------------------------------------------------
-----------------------------------------------------
---
---------- --- ---- ---- --- ---- ------ -- --------- -- -- -
----- ------- - ------------------ ----
----- ----- - ----------------------
------------------------ - ------- - ------ ------ ------ - ---
--------------------------------------- --------
-----------------------------------------
-------------------------------------------------- --------
---
---在上面的例子中，我们使用 mount 方法创建了一个 TodoListApp 组件的完全渲染对象 wrapper。然后我们断言组件是否符合预期，例如 AddTodo 组件是否存在，TodoList 是否存在等。
我们可以通过 wrapper.find(selector) 来查找组件中的元素，通过 wrapper.simulate(event[, mock]) 来模拟触发事件。在触发事件后，我们再次断言组件状态是否符合预期。
结论
Enzyme 是一个功能强大、易于使用的 React 测试框架。在使用 Enzyme 进行测试时，我们需要区分单元测试和集成测试，然后根据不同测试场景选择适合的 API 进行测试。我们还可以使用丰富的断言库来断言组件状态和行为是否符合预期。
在进行测试时，我们可以通过测试用例来捕获代码的行为，以确保代码的质量和稳定性。同时也可以提高程序猿对代码理解的深度，加深对组件功能和使用方法的理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671c5d1c9babaf620fb070fb