Enzyme 的常见用法和技巧
Enzyme 是一个测试 React 组件的 JavaScript 库，是由 AirBnb 公司开发的。它可以让我们在虚拟的 DOM 中渲染组件，并对组件进行断言和验证，是 React 组件测试中的重要工具。
这篇文章将探讨 Enzyme 的常见用法和技巧，帮助你更好地测试 React 组件。
安装 Enzyme
首先，我们需要安装 Enzyme 库。可以通过 npm 安装，命令如下：
npm install --save-dev enzyme enzyme-adapter-react-16
Enzyme 需要与 React 一起使用，所以我们还需要安装适配器 enzyme-adapter-react-16。
使用 Enzyme
使用 Enzyme 测试 React 组件需要进行多个步骤：
- 导入配置适配器
我们需要使用 adapter 来告诉 Enzyme 如何去运行 React，以便于在测试组件时模拟组件行为。所以首先我们要在测试文件中导入适配器。
import Enzyme, { shallow, mount, render } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
// 配置 Enzyme 适配器
Enzyme.configure({ adapter: new Adapter() });- 渲染组件
Enzyme 提供了三种渲染方式：shallow、mount 和 render。
- shallow：浅渲染，只渲染第一层组件。它用于测试组件自身的逻辑，但不能测试组件的子组件。
- mount：完整渲染，渲染整个组件树。它用于测试组件及其子组件的逻辑。
- render：静态渲染，将组件渲染成静态 HTML 字符串，用于快照测试。
一般情况下，我们使用 shallow 进行测试，因为它速度快且不依赖于 DOM。
- 断言和验证
在 Enzyme 中，我们可以使用 expect() 和一些断言方法来检查组件的属性和状态是否正确。
常用的断言方法包括：
- expect(wrapper).to.have.lengthOf(n): 断言组件 wrapper 中的元素个数为 n。
- expect(wrapper).to.have.className(classname): 断言组件 wrapper 是否有指定的 classname。
- expect(wrapper).to.have.prop(name, value): 断言组件 wrapper 是否有指定的属性，如果有，属性值是否为指定值。
- expect(wrapper).to.have.state(key, value): 断言组件 wrapper 的状态是否正确，如果正确，状态值是否为指定值。
- expect(wrapper).to.containMatchingElement(selector): 断言组件 wrapper 中是否包含指定的子组件。
- expect(wrapper.find(selector)).to.have.lengthOf(n): 断言组件 wrapper 中查找到的子组件个数为 n。
示例代码
下面展示一个简单的示例代码，它测试了一个组件的渲染和状态：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ---------------------
-- -- ------ ---
------------------ -------- --- --------- ---
----------------------- -- -- -
-- ----------
---------- --------- ---- -------- -- -- -
----- ------- - -------------------- ----
------------------------------------------------- ---------
---
-- ----------
---------- ----- ------ ------ --------- -- -- -
----- ------- - -------------------- ----
----- ------ - -----------------------
-------------------------
------------------------------------------------- ----------
---
---总结
以上是 Enzyme 的常见用法和技巧。通过深入学习 Enzyme，相信你将能更好地测试 React 组件。此外，测试是前端开发中必不可少的一环，通过测试我们可以更好地保证代码质量和稳定性，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64747a09968c7c53b01d892d