React 是目前前端领域最流行的 JavaScript 库之一，而 Enzyme 则是一款用于测试 React 组件的 JavaScript 测试工具。本文主要介绍 Enzyme 测试工具的使用方法，包括安装、测试框架选择及使用方式，旨在帮助初学者快速入门。
安装
首先需要在项目中安装 Enzyme 模块及需要的模块，以 npm 安装为例：
npm install --save-dev enzyme enzyme-adapter-react-16 react-test-renderer
其中，enzyme 对象用于允许操作 React 组件，enzyme-adapter-react-16 用于兼容 React 16+ 版本的运行，而 react-test-renderer 帮助我们渲染 React 组件，方便测试。
测试框架选择
Enzyme 可以和多种测试框架协同工作，常见的测试框架有 Mocha、Jest 等，本文以 Jest 为例进行讲解。
在项目中安装 jest，并在 package.json 中添加如下配置：
"scripts": {
"test": "jest --watchAll"
},其中 --watchAll 参数用于启用 Jest 的监听模式，监听到代码变化会自动运行测试用例。
Enzyme 的使用方式
Enzyme 提供了三种操作 React 组件的方法，分别是 Shallow Rendering、Full DOM Rendering 和 Static Rendering。
Shallow Rendering
Shallow Rendering 可以渲染一个组件的第一层子组件，如果组件中使用了其他组件或插件，这些子组件将不被渲染。这种渲染方式通常用于单元测试，因为它渲染速度快，而且能够隔离单元测试。
示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
-------- --------- ----- -- -
------ -
-----
----------------
------- ----------- -- -------------- - --------------
------- ----------- -- -------------- - --------------
------
--
-
----------- --- ------- ---- ---- ------ ------- -- -- -
----- ----- - --
----- ------- - ---------------- ------------- ----
------------------------------------------------------
---Full DOM Rendering
Full DOM Rendering 是指使用 JSDOM 在 Node.js 环境中渲染整个组件树的方式，可以进行真实的 DOM 操作。这种渲染方式比较耗费时间和内存，通常用于集成测试。
示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
-------- --------- ----- -- -
------ -
-----
----------------
------- ----------- -- -------------- - --------------
------- ----------- -- -------------- - --------------
------
--
-
--------- --- ------- -------- ---- ------ -- --------- -- -- -
----- ----- - --
----- ----------- - ----------
----- ------- - ------
-------- ------------- --------------------- --
--
-----------------------------------------------
----------------------------------------------
---Static Rendering
Static Rendering 直接将组件渲染为静态 HTML，不需要依赖 React DOM，可以在不需要真实 DOM 的情况下进行组件测试。
示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ---------
-------- --------- ----- -- -
------ -
-----
----------------
------- ----------- -- -------------- - --------------
------- ----------- -- -------------- - --------------
------
--
-
----------- ----------- -- -- -
----- ----- - --
----- ------ - --------------- ------------- ----
---------------------------------
---总结
Enzyme 是一款适合测试 React 组件的 JavaScript 工具，本文介绍了 Enzyme 的安装、测试框架选择及操作 React 组件的方法，以 Shallow Rendering、Full DOM Rendering 和 Static Rendering 三种方式进行讲解。希望能够帮助读者更好地了解和使用 Enzyme。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6461b510968c7c53b030dfe3