React 是一个流行的 JavaScript 库，它主要用于构建前端应用程序。在实际开发中，测试是不可或缺的一部分。React 框架拥有自己的测试工具，但这些工具通常只测试组件的渲染。如果想测试组件的行为和互动，需要使用第三方测试工具——Enzyme。
Enzyme 是由 Airbnb 开发的 React 测试工具，它可以进行深度渲染和互动测试。Enzyme 提供了一系列高级技巧，帮助开发者更好地进行 React 测试。接下来，我们将介绍一些常用的 Enzyme 技巧。
安装 Enzyme
在 React 项目中安装 Enzyme 非常容易。首先，通过 npm 安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
enzyme-adapter-react-16 是适用于 React 16 的 Enzyme 适配器。
作为一个节点测试工具，Enzyme 需要一个 DOM 环境。我们可以使用 jsdom 创建一个虚拟 DOM。在测试文件的顶部添加以下代码即可：
import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; configure({ adapter: new Adapter() });
现在，我们已经准备好开始编写 Enzyme 测试了。
测试组件渲染
Enzyme 具有一个非常强大的 shallow 函数，它可以将组件浅层渲染成一个虚拟 DOM。使用 shallow 渲染可以大大提高测试的效率，因为它不需要真正创建 DOM 元素。
下面是一个例子：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ ----------- ---- ---------------- ----------------------- -- -- - ------------ ------ ----------- -- -- - ----- ------- - -------------------- ---- ---------------------------------- --- ---展开代码
这里我们使用了 toMatchSnapshot 函数，可以将 shallow 渲染的结果与之前保存的快照进行比较。如果存在差异，则会失败并提供有用的错误消息。
测试组件状态
通常情况下，组件的行为取决于其内部状态。因此，测试组件状态非常重要。
使用 Enzyme 提供的 state() 函数，我们可以验证组件的状态：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ ----------- ---- ---------------- ----------------------- -- -- - ------------ -------- ----- ---- ------ -- --------- -- -- - ----- ------- - -------------------- ---- ----- ------ - ----------------------- ------------------------- ------------------------------------------ --- ---展开代码
这里我们在 shallow 渲染后模拟了按钮的点击，然后断言组件的状态是否正确。
测试组件生命周期
React 组件具有生命周期方法，它们在组件的不同阶段被调用。这些方法非常重要，因为它们可以让我们在适当的时候进行操作。
我们可以使用 Enzyme 提供的一些函数来测试组件的生命周期方法。比如我们可以测试 componentWillMount 和 componentDidMount：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----- - ---- --------- ------ ----------- ---- ---------------- ----------------------- -- -- - ------------ ---- -------------------- -- -- - ----- --- - --------------------------------- ---------------------- ----- ------- - ------------------ ---- ------------------------------- --- ------------ ---- ------------------- -- -- - ----- --- - --------------------------------- --------------------- ----- ------- - ------------------ ---- ------------------------------- --- ---展开代码
这里我们使用了 Jest 的 spyOn 函数来跟踪函数的调用。我们还使用了 mount 函数，它可以在真正的 DOM 节点上完全渲染组件。
测试组件互动
React 组件通常与其他组件和用户交互。我们可以使用 Enzyme 模拟这些交互。
我们可以通过 find 函数找到组件中的元素，然后使用 simulate 函数模拟事件：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ ----------- ---- ---------------- ----------------------- -- -- - ------------ ---- ----------- ---- ------ -- --------- -- -- - ----- ----------- - ---------- ----- ------- - -------------------- --------------------- ---- ----- ------ - ----------------------- ------------------------- --------------------------------------- --- ---展开代码
这里我们使用了 Jest 的 mock 函数，跟踪了 handleClick 函数的调用。我们还通过传递 onClick 属性将该函数传递给组件。
总结
Enzyme 提供了强大而灵活的 React 测试工具，可以进行深度渲染和交互测试。本文介绍了测试组件渲染、状态、生命周期和互动的一些技巧。希望可以帮助开发者更好地进行 React 测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b0ca5badd4f0e0ffa23914
