Enzyme 在 React 组件测试中的常用技巧
React 组件测试一般都离不开 Enzyme 这个工具。它可以让我们方便地进行 React 组件的单元测试、集成测试以及 UI 测试。 接下来，我们将介绍 Enzyme 的常用技巧，希望对初学者提供帮助，也可以为有经验的开发者提供参考。
Part 1: 简介
Enzyme 是 Airbnb 开源的 React 组件测试工具，它提供了一种优雅、简洁的 API，可以对 React 组件进行多样化的测试。Enzyme 在助力测试的同时，还支持 Jest、Mocha 等测试框架，是 React 测试中的一款不可或缺的工具。
Part 2: 安装 Enzyme
安装 Enzyme 前需要安装 React，这里假设已经安装好 React 环境。
在项目中安装 enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
Part 3: 在 Jest 中配置 Enzyme
在使用 Enzyme 进行测试前，我们需要在 Jest 中配置 Enzyme。
在项目根目录下创建 setupTests.js 文件，添加以下内容：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
// 配置 enzyme-adapter-react-16 适配器
Enzyme.configure({ adapter: new Adapter() });Part 4: 使用 Enzyme 测试 React 组件
根据测试需要，Enzyme 提供了三个组件渲染器来测试不同类型的组件：
shallow：只渲染当前组件，不渲染子组件。mount：渲染当前组件以及其所有子组件，完整的渲染组件。render：将组件渲染成静态 HTML 字符串，这个只适合非常简单组件和快照测试。
下面我们以 shallow 为例，介绍如何使用 Enzyme 测试 React 组件。
（1）测试组件渲染是否成功
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --- ---- --------
-------------- ---- -- -- -
----------- ------- -- -- -
----- ------- - ------------ ----
------------------------------------
---
---这个测试验证了 App 组件是否渲染成功。
（2）测试组件是否渲染正确内容
测试之前需要在 App.js 中修改代码，将 Welcome to React 改为 Welcome to Enzyme。
测试代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --- ---- --------
-------------- ---- -- -- -
----------- ------- --------- -- -- -
----- ------- - ------------ ----
----- ------- - -------- -- -------- -- ---- -------
------------------------------------------------
---
---这个测试验证了 App 组件渲染内容是否正确。
（3）测试组件交互性
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --- ---- --------
-------------- ---- -- -- -
------------- ----- ---- ------ -- --------- -- -- -
----- ------- - ------------ ----
----- --- - ---------------------------------
---------------------------
----- ----- - ------------------------
-------------------------------
----------------------
-------------------------------
---
---这个测试验证了 App 组件点击按钮时数字是否递增。
Part 5: 测试技巧
- 使用
beforeEach方法，减少重复代码。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --- ---- --------
-------------- ---- -- -- -
--- --------
------------- -- -
------- - ------------ ----
---
----------- ------- -- -- -
------------------------------------
---
----------- ------- --------- -- -- -
----- ------- - -------- -- --------
------------------------------------------------
---
------------- ----- ---- ------ -- --------- -- -- -
----- --- - ---------------------------------
---------------------------
----- ----- - ------------------------
-------------------------------
----------------------
-------------------------------
---
---- 封装
setup()方法，使测试更加模块化。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --- ---- --------
----- ----- - ------ - --- ----- - ----- -- -
----- ------- - ------------ ---------- ----
-- ------- -
------------------------
-
------ --------
--
-------------- ---- -- -- -
----------- ------- -- -- -
----- ------- - --------
------------------------------------
---
----------- ------- --------- -- -- -
----- ------- - --------
----- ------- - -------- -- --------
------------------------------------------------
---
------------- ----- ---- ------ -- --------- -- -- -
----- ------- - ----------- - ------ - ---
----- --- - ---------------------------------
---------------------------
----- ----- - ------------------------
-------------------------------
----------------------
-------------------------------
---
---- 在测试异步函数时使用
async/await。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --- ---- --------
----- ----- - ------ - --- ----- - ----- -- -
----- ------- - ------------ ---------- ----
-- ------- -
------------------------
-
------ --------
--
-------------- ---- -- -- -
----------- ---- ------ ----- -- -- -
----- ------- - --------
----- -------- - -------------------
----- ---------------------
-------------------------------------
--- --
----- ------
---
---
---这个测试验证了 App 组件异步获取数据的正确性。
Part 6: 总结
Enzyme 可以让我们更加方便地测试 React 组件，让测试变得更加简单和有效。在使用 Enzyme 进行测试时，我们需要：
- 安装 Enzyme
- 在 Jest 中配置 Enzyme
- 使用 Enzyme 测试 React 组件
- 学习测试技巧，让测试更加简单、高效
当然，这里只介绍了 Enzyme 测试中的一些常用技巧，用到了深层次的 API，还有很多其他技巧和实践需要掌握。继续深入学习 Enzyme，可以提高我们的 React 组件测试能力，让我们在开发中更加从容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6462c7bc968c7c53b03de453