介绍
React 是现代前端开发非常流行的框架，它的组件化特性为开发者提供了更加灵活的开发方式，同时也为测试带来了挑战。Enzyme 是一个专门为 React 组件提供测试工具的开源库，它提供了丰富的 API 和异步的渲染模式来模拟用户操作以及测试组件的正确性，是 React 组件测试不可缺少的工具。
本文将详细介绍 Enzyme 及其应用，包括安装和配置、基础 API 的使用、Shallow Rendering 和 Mounting 两种测试方式的区别和应用、如何进行断言、以及一个完整的示例项目用于演示 Enzyme 在 React 组件测试中的作用和用法。
安装和配置
首先需要在项目中安装 Enzyme，可以使用 npm 或 yarn 安装，推荐使用 yarn：
yarn add -D enzyme react-test-renderer @wojtekmaj/enzyme-adapter-react-17
- enzyme：主要库
- react-test-renderer：避免在 mount 模式时渲染真实的 DOM 而使测试变慢
- @wojtekmaj/enzyme-adapter-react-17：适配器，要根据本地的 React 版本选择合适的适配器
安装完成后，需要在测试文件中初始化 Enzyme：
import Enzyme from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
Enzyme.configure({ adapter: new Adapter() });基础 API 的使用
Enzyme 主要提供了三个 API：shallow()、mount() 和 render()。其中，shallow() 可以渲染出一个 React 组件的浅层组件树，使用该 API 可以快速渲染出 Modal 中的部分组件，便于在测试中断言展示和隐藏的正确性。mount() 可以渲染出一个完整的组件树，包括组件自身以及组件的子组件。render() 会返回一个标准的 HTML，只能用于静态分析。
以下是使用 shallow() 和 mount() 的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- ----- - ---- ---------
------------ ----- ---- -- -- -
------------------- -- -- -
----- ------- - -------------- ----
------------------------------------
---
---------- ---- ------ ------- -- -- -
----- ----------- - ----------
----- ------- - ------------ ------------------------- ----
--------------------------------------------------
---------------------------------------------
---
---在这个示例中，我们使用了 shallow() 来测试是否正常渲染出组件，并使用了 mount() 来测试点击 mask 时是否关闭了 Modal 的正确性。需要注意的是，mount() 模式需要渲染真实的 DOM 对象，可能会消耗很多时间，但在测试组件的交互性时非常有用。
Shallow Rendering 和 Mounting 两种测试方式的区别
Shallow Rendering 和 Mounting 是 Enzyme 提供的两种测试方式，它们的主要区别在于：
- Shallow Rendering 只渲染出所测试组件的浅层组件树，不会渲染出组件的子组件，因此测试速度较快。
- Mounting 模式会渲染出组件的完整组件树，包括所有子组件，因此测试速度会比 Shallow Rendering 模式慢一些。
以下是使用两种模式测试同一组件的代码：
// Shallow Rendering 模式 const wrapper = shallow(<MyComponent />); // Mounting 模式 const wrapper = mount(<MyComponent />);
一般来说，建议在测试展示和隐藏的正确性时使用 shallow() 模式，因为其快速、简单，而在测试交互性时使用 mount()，因为需要测试整个组件及其子组件的正确性。
断言
断言是测试中最基本的一环，如果断言失败，那么测试就失败了。在 Enzyme 中可以使用 Jest 等测试框架提供的库进行断言，也可以使用 Enzyme 提供的 API，以下是一个简单的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------------ ----------- ---- -- -- -
-------- ------ --- ------ -- -- -
----- ------- - -------------------- ----
-------------------------------------------
---
-------- ------- --------- -- -- -
----- ----------- - ----------
----- ------- - -------------------- --------------------- ----
---------------------------------------------
---------------------------------------------
---
---在这个示例中，我们使用 shallow() 渲染了 MyComponent 组件，并测试了组件的默认 props 和 onClick 事件的正确性。
Enzyme 的完整示例项目
为了更好的理解 Enzyme 在 React 组件测试中的应用，以下是一个完整的示例项目：enzyme-demo
该项目通过演示 Modal 组件的两个案例来详细介绍了 Enzyme 的用法及注意事项，包括：
- 如何用 Enzyme 渲染单个组件
- 如何测试一个响应对用户点击的组件的交互
- 如何使用 Enzyme 的断言提供有价值的测试结果
- 如何使用 Enzyme 的各种其他强大功能
这里只展示该项目的部分代码：
-- -------------------- ---- -------
------------ ----- ---- -- -- -
--------- ---------- -- -- -
----- ------- - -----------------------
------------------------------------
---
--------------- ------------- -- -- -
----- ----------- - ----------
----- ------- - -------------------- ------------------------- ----
--------------------------------------------------
---------------------------------------
---
---该示例中使用了 shallow() 模式测试 Modal 是否正常渲染出来，并使用了 mount() 模式测试点击蒙层时是否调用了 handleClose，同时也用到了 Jest 提供的 mock 函数功能。
总结
本文介绍了 Enzyme 及其应用，包括安装和配置、基础 API 的使用、Shallow Rendering 和 Mounting 两种测试方式的区别和应用、如何进行断言，以及一个完整的示例项目用于演示 Enzyme 在 React 组件测试中的作用和用法。Enzyme 是一个非常强大的测试工具，它提供了丰富的 API 和异步的渲染模式来模拟用户操作以及测试组件的正确性，因此我们可以放心地在开发 React 组件时使用 Enzyme 进行测试，保证组件的正确性和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a9d9ffadd4f0e0ff349a0c