在前端开发中，测试是不可或缺的一部分。随着项目的不断更新和迭代，测试的重要性也逐渐凸显出来。但是，测试也是一个繁琐的过程，尤其是在组件测试中，手动测试往往效率低下。为了解决这个问题，出现了许多自动化测试工具，其中 Enzyme 是 React 组件测试中比较流行的一种。
Enzyme 简介
Enzyme 是由 Airbnb 开源的一个 React 组件测试工具。它可以模拟 DOM，使得测试变得更加简单和高效。它提供了简单有效的 API，帮助我们完成渲染组件、模拟事件、触发生命周期等常见操作。
当前，Enzyme 已更新到 v3 版本。相比于之前版本，主要改动有：
- 支持 React 16
- 移除了
React.addons.TestUtils的依赖，让 Enzyme 单独存在 - 更好的 TypeScript 支持
安装 Enzyme
首先我们需要安装 Enzyme 和必要的适配器。目前，Enzyme 兼容 React 16 版本。
# 安装 Enzyme npm install --save-dev enzyme # 安装 React 16 的适配器 npm install --save-dev enzyme-adapter-react-16
配置 Enzyme
配置 Enzyme 之前，我们需要先导入 React 和 Enzyme，还需要导入 Enzyme 适配器，然后通过 configure 方法来配置它们的关系：
import React from 'react';
import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
// 配置适配器
configure({ adapter: new Adapter() });在整个项目中，只需要配置一次即可。这样，我们就可以开始测试了。
测试组件
事实上，测试组件的方法有很多，主要有两种：浅渲染和深渲染。
浅渲染
浅渲染只渲染组件的第一层，不渲染子组件。
我们可以使用 shallow 方法来实现浅渲染：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
-------- ------------------ -
------ -
-----
----------------------
----------------------
------
--
-
----------- ---------- -- -- -
----- ------- - --------
------------ ------------- --------------- --
--
-------------------------------------------------------
-----------------------------------------------------
---在这里，我们使用 shallow 方法对 MyComponent 进行浅渲染，并断言了是否包含了 <h1> 和 <p> 标签。
深渲染
深渲染会把所有子组件一并渲染出来。
我们可以使用 mount 方法来实现深渲染：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
-------- ------------------ -
------ -
-----
----------------------
----------------------
------
--
-
----------- ---------- -- -- -
----- ------- - ------
------------ ------------- --------------- --
--
-------------------------------------------------------
-----------------------------------------------------
---在这里，我们使用 mount 方法对 MyComponent 进行深渲染，并断言了是否包含了 <h1> 和 <p> 标签。
使用建议
最后，我们来总结一下使用 Enzyme 的一些建议：
- 尽量使用浅渲染，因为它的速度快于深渲染，并且因为它只渲染了组件的第一层，所以大多数情况下足以满足我们的需求。
- 我们应该尽可能地测试组件的 props 和状态，以覆盖尽可能多的情况。
- 我们应该避免使用类似
find这样的方法，因为它们会对组件树进行遍历，这会影响测试的速度。而对于组件树的查询，我们应该尽可能使用直接查找标签名的方法，以提高速度。
示例代码
- 项目结构
src/
component/
MyComponent.js
MyComponent.test.js- MyComponent.js
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- ------------------ -
----- ------- --------- - ------------
----- ----------- - -- -- -
-------------- - ---
-
------ -
-----
----------------------
--------- -----------
------- --------------------------- -----------
------
--
-
------ ------- ------------- MyComponent.test.js
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
---------------------- ---- -- -- -
----------- ------- -- -- -
----- ------- - -------------------- ------------- ----
----- ----- - -------------------
--------------------------------------
---
----------- ------- -- -- -
----- ------- - -------------------- ------------- ----
----- ----- - ------------------------
------------------------------------ ----
---
---------- -------- -- -- -
----- ------- - -------------------- ------------- ----
----- ------ - -----------------------
-------------------------
----- ----- - ------------------------
------------------------------------ ----
---
---这是一个简单的计数器组件，它渲染了标题、计数器和一个按钮。我们编写了三个不同的测试用例，分别测试了标题和计数器的渲染以及按钮的点击事件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64accf2748841e98948d9443