在前面的两篇文章中，我们介绍了 React 单元测试的基础知识和使用 Jest 来进行测试的方法。在这篇文章中，我们将介绍另一个常用的 React 测试工具——Enzyme，并讲解如何使用 Enzyme 来进行 React 组件测试。
Enzyme 简介
Enzyme 是由 Airbnb 开发的 React 测试工具，它提供了一系列 API 来帮助我们方便地进行 React 组件测试。Enzyme 支持三种渲染方式：shallow、mount 和 render。
- shallow：浅渲染，只渲染当前组件，不渲染子组件，适用于单元测试。
- mount：完整渲染，渲染当前组件及其子组件，适用于集成测试。
- render：静态渲染，将 React 组件渲染成静态 HTML，适用于快照测试。
在本文中，我们将主要介绍 shallow 渲染的使用方法。
安装 Enzyme
在使用之前，我们需要先安装 Enzyme。Enzyme 的安装非常简单，只需要执行以下命令即可：
--- ------- ---------- ------ -----------------------
其中，enzyme 是 Enzyme 的核心库，enzyme-adapter-react-16 是 Enzyme 适配 React 16 的适配器。如果你使用的是其他版本的 React，需要安装相应版本的适配器。
使用 Enzyme 进行组件测试
下面，我们将通过一个示例来演示如何使用 Enzyme 进行组件测试。假设我们有以下一个简单的组件：
------ ----- ---- --------
-------- ------------- -
----- - -------- -------- - - ------
------ -
------- -------------------------------------
--
-
------ ------- -------我们的测试目标是测试这个 Button 组件的 onClick 事件是否能够正常触发。首先，我们需要编写一个测试用例：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
------------------ -- -- -
---------- ---- ------- ---- ------ -- --------- -- -- -
----- ------- - ----------
----- ------- - --------------- ----------------------- -------------
-----------------------------------------
-----------------------------------
---
---上面的测试用例中，我们首先定义了一个 onClick 函数，并使用 jest.fn() 来模拟。然后，我们使用 shallow 渲染来渲染 Button 组件，并将 onClick 传递给组件。最后，我们通过 wrapper.find('button').simulate('click') 来模拟点击事件，并使用 expect(onClick).toHaveBeenCalled() 来验证 onClick 是否被调用。
Enzyme API
除了上面介绍的 find() 和 simulate() 方法以外，Enzyme 还提供了许多其他的 API，用于方便地进行组件测试。下面是一些常用的 API：
- shallow：浅渲染，返回一个 ShallowWrapper 对象。
- mount：完整渲染，返回一个 ReactWrapper 对象。
- render：静态渲染，返回一个 CheerioWrapper 对象。
- find(selector)：查找指定选择器的子元素。
- filter(selector)：过滤出符合指定选择器的元素。
- contains(node)：判断是否包含指定的节点。
- text()：获取元素的文本内容。
- props()：获取元素的 props。
- setState(state)：设置组件的状态。
- setProps(props)：设置组件的 props。
- simulate(event[, ...args])：模拟触发指定事件。
- unmount()：卸载组件。
总结
Enzyme 是一个非常好用的 React 测试工具，它提供了丰富的 API，能够帮助我们方便地进行组件测试。在使用 Enzyme 进行测试时，我们应该注意选择合适的渲染方式，并根据需要选择合适的 API 进行测试。通过不断地学习和实践，我们可以更好地掌握 Enzyme 的使用方法，提高我们的测试效率和质量。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6562d111d2f5e1655dc986d3