Enzyme 是一个流行的 React 测试工具，它提供了一组用于测试 React 组件的实用函数。Enzyme 的目标是使测试 React 组件变得更加简单和直观。本文将介绍 Enzyme 的基本概念、使用方法和一些实用技巧。
Enzyme 的基本概念
Enzyme 主要由三个模块组成：enzyme、enzyme-adapter-react 和 enzyme-adapter-utils。其中 enzyme 为 Enzyme 的核心模块，提供了许多常用的方法，例如 shallow、mount、render 等。enzyme-adapter-react 和 enzyme-adapter-utils 则是适配器模块，分别用于适配 React 和其他 JavaScript 库（例如 Redux）。
shallow 渲染
Enzyme 最常用的方法是 shallow，它会创建一个浅渲染的组件实例，只渲染组件的第一层子组件，不渲染组件的子组件。这样可以提高测试效率，并保证测试的准确性。shallow 方法可以通过如下代码导入：
import { shallow } from 'enzyme';挂载渲染
mount 方法会将组件完全渲染到 DOM 中。与 shallow 不同，mount 会渲染所有子组件。这样可以确保测试能够完全覆盖组件树中的每一个组件。mount 方法可以通过如下代码导入：
import { mount } from 'enzyme';静态渲染
render 方法与 mount 类似，但只会渲染组件的 HTML，并不会将其挂载到 DOM 中。这样可以更方便地测试组件生成的 HTML 结构是否正确。render 方法可以通过如下代码导入：
import { render } from 'enzyme';使用 Enzyme 进行组件测试
在使用 Enzyme 进行组件测试之前，需要安装 Enzyme 及其适配器模块。以 React 16 为例，安装命令为：
npm install enzyme enzyme-adapter-react-16 --save-dev
在安装完成之后，需要进行适配器的配置。首先，需要在测试文件中导入适配器：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });在进行组件测试之前，需要导入待测试的组件，并使用 shallow、mount 或 render 函数进行组件渲染。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- ------ ------ - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---------- ------- ---- ------ --------- -- -- -
----- ------- - ------------------ ----
------------------------------------- ---------
---
---------- ------- - -------- -- -- -
----- ------- - ------------------- ----
-------------------------------------------------
---
---在上面的示例中，我们使用了三个方法分别测试了组件的三个方面：渲染、文本内容和元素结构。其中第一个测试用例使用 shallow 渲染组件，测试组件是否生成了正确的快照；第二个测试用例使用 mount 渲染组件，并通过 text 方法检查组件是否包含了正确的文本内容；第三个测试用例使用 render 渲染组件，并使用 find 方法查询是否包含了一个按钮元素。
实用技巧
调试技巧
在进行组件测试时，有时会遇到测试用例失败的情况。这时可以通过 debug 方法打印当前组件的状态。例如：
-- -------------------- ---- -------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
-----------------------------
----------------------------------
---
---在上述代码中，我们将 debug 方法的输出结果打印到控制台，以便进行调试。
Mock 模块引用
在进行组件测试时，有时会需要使用一些依赖模块。这时可以使用 jest.mock() 方法来模拟这些模块的引用。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----- ---- --------
------ ----------- ---- ----------------
-------------------
----------------------- -- -- -
---------- ---- ---- ---- -------- -- -- -
----- ---- - - ----- ------ ------- --
--------------------------------- ---- ---
----- ------- - -------------------- ----
------ ------------------------- -- -
-------------------------------------------------
---
---
---在上述代码中，我们使用了 jest.mock('axios') 方法来模拟了 axios 模块的引用，在测试用例中使用 axios.get.mockResolvedValueOnce() 方法模拟了服务器的响应，从而测试了组件是否正确加载了服务器返回的数据。
结论
本文介绍了 Enzyme 的基本概念、用法和一些实用技巧，Enzyme 是 React 生态中非常重要的测试工具之一。在使用 Enzyme 进行组件测试时，需要注意使用 shallow、mount 和 render 这三个方法进行不同层次的渲染，以提高测试效率。同时，在进行组件测试时，可以使用 debug 方法进行调试，也可以使用 jest.mock() 方法模拟模块的引用，从而测试组件的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ff94651b0bf82c71cc526a