React 是当前最受欢迎的前端框架之一，它的组件化开发方式让开发者可以更方便的管理和维护代码。然而，为了保证组件的可靠性和稳定性，我们需要对其进行测试。在 React 组件测试中，Enzyme 是一个非常强大的工具。本文将介绍如何使用 Enzyme 进行 React 组件测试，并分享一些小技巧。
Enzyme 简介
Enzyme 是一个 React 组件测试工具，它提供了一系列 API 来模拟渲染 React 组件，并提供了一些实用的工具函数来进行断言和查询。Enzyme 支持三种渲染方式：浅渲染（shallow）、全渲染（mount）和静态渲染（render）。其中，浅渲染是最常用的一种方式，因为它能够快速地渲染组件并进行测试。
安装 Enzyme
在开始使用 Enzyme 进行测试之前，我们需要先安装它。可以使用 npm 或 yarn 进行安装：
npm install --save-dev enzyme enzyme-adapter-react-16
或
yarn add --dev enzyme enzyme-adapter-react-16
其中，enzyme-adapter-react-16 是针对 React 16 版本的适配器，如果你的 React 版本不是 16，可以选择对应的适配器。
浅渲染（shallow rendering）
浅渲染是指只渲染组件的第一层，不渲染其子组件。这种方式可以快速地测试组件的渲染结果和事件处理函数，而不用考虑子组件的影响。
我们可以先定义一个简单的组件：
import React from 'react'; function Button({ onClick, children }) { return <button onClick={onClick}>{children}</button>; } export default Button;
然后编写一个测试用例：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ ------ ---- ----------- ------------------ -- -- - ---------- ------ - -------- -- -- - ----- ------- - --------------- ---- ----------------------------------------------- --- ---------- ---- ------- ---- ------ -- --------- -- -- - ----- ------- - ---------- ----- ------- - --------------- ----------------------- ------------- ----------------------------------------- ----------------------------------- --- ---展开代码
在上面的测试用例中，我们使用 shallow 函数来渲染 Button 组件，并进行断言。第一个测试用例测试组件是否渲染出一个 button 元素，第二个测试用例测试点击 button 是否会触发 onClick 事件。
全渲染（mount rendering）
全渲染是指渲染组件的所有子组件，它比浅渲染更耗时，但可以测试子组件的交互和状态。如果我们需要测试组件的子组件，可以使用全渲染。
我们可以定义一个包含子组件的组件：
-- -------------------- ---- ------- ------ ----- ---- -------- -------- --------- ------------ -- - ----- ------- --------- - ----------------------------- -------- ----------- - -------------- - --- - ------ - ----- ------- ------------------------------ -------------------- ------- ----------- -- -------------- - -------------- ------ -- - ------ ------- --------展开代码
然后编写一个测试用例：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----- - ---- --------- ------ ------- ---- ------------ ------------------- -- -- - ---------- --------- ----- ---- - ------ -- --------- -- -- - ----- ------- - -------------- ---- ----- ---------- - ----------------------------- ----- --------- - --------------------- ----------------------------- ----------------------------------- --- ---------- --------- ----- ---- - ------ -- --------- -- -- - ----- ------- - -------------- ---- ----- ----------- - ----------------------------- ----- --------- - --------------------- ------------------------------ ------------------------------------ --- ---展开代码
在上面的测试用例中，我们使用 mount 函数来渲染 Counter 组件，并进行断言。第一个测试用例测试点击 + 按钮是否会增加计数器的值，第二个测试用例测试点击 - 按钮是否会减少计数器的值。
静态渲染（rendering）
静态渲染是指将组件渲染为静态 HTML 字符串，这种方式可以测试组件的快照（snapshot）和样式。如果我们需要测试组件的样式或者布局，可以使用静态渲染。
我们可以定义一个包含样式的组件：
-- -------------------- ---- ------- ------ ----- ---- -------- -------- ------- ----- -------- -- - ------ - ---- ----------------- --------------- ------------- ---------- ------ -- - ------ ------- ------展开代码
然后编写一个测试用例：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------ - ---- --------- ------ ----- ---- ---------- ----------------- -- -- - ---------- ------ -- ----- ---- ------- ------ -- -- - ----- ------- - ------------- --------------------------------- ---------------------------------- --- ---------- ------ -- ----- ---- ------ ------ -- -- - ----- ------- - ------------- ------------------------------- ---------------------------------- --- ---展开代码
在上面的测试用例中，我们使用 render 函数来渲染 Alert 组件，并进行断言。我们使用 toMatchSnapshot 函数来测试组件是否符合预期的快照。
小技巧
使用
debug函数来输出渲染结果debug函数可以输出 Enzyme 渲染后的 HTML 结构，方便我们调试测试用例。例如：const wrapper = shallow(<Button onClick={onClick}>Click me</Button>); console.log(wrapper.debug());
使用
findWhere函数来查找符合条件的元素findWhere函数可以根据条件查找符合要求的元素。例如：const wrapper = shallow(<Button onClick={onClick}>Click me</Button>); const button = wrapper.findWhere(node => node.type() === 'button');
使用
setState函数来修改组件的状态setState函数可以修改组件的状态，方便我们测试组件的状态变化。例如：const wrapper = mount(<Counter />); const counter = wrapper.instance(); counter.setState({ count: 10 });
总结
Enzyme 是一个非常强大的 React 组件测试工具，它提供了一系列 API 来模拟渲染 React 组件，并提供了一些实用的工具函数来进行断言和查询。在测试 React 组件时，我们可以根据需要选择浅渲染、全渲染或者静态渲染来进行测试。同时，我们还可以使用一些小技巧来优化测试用例。希望本文能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6567ecf4d2f5e1655d0ba308
