React 单元测试从入门到精通 (五)- Enzyme 的使用
在前面的文章中，我们介绍了 React 单元测试的基础知识以及 Jest 的使用方法。本篇文章将着重介绍 Enzyme，它是一款 React 组件测试工具，可以完成 React 组件的渲染、断言和交互测试等功能。
一、Enzyme 简介
Enzyme 是由 Airbnb 开源的一个 React 组件测试工具，主要用于测试 React 组件的输出、状态和交互。Enzyme 提供了三个级别的测试输出，可以帮助我们更方便地测试 React 组件。它提供了浅渲染，全渲染和静态渲染三种方式，让我们可以在测试用例中更方便地获取组件的状态和输出。同时，Enzyme 还提供了一些检查器，可以更方便地检查组件的输出是否符合我们的预期。
二、Enzyme 安装
Enzyme 的安装非常简单，只需要在项目的根目录中执行以下命令：
npm install --save-dev enzyme enzyme-adapter-react-16
在进行测试之前，需要对 Enzyme 进行配置。在项目的根目录中，创建一个名为 setupTests.js 的文件，并添加如下内容：
import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; Enzyme.configure({ adapter: new Adapter() });
三、Enzyme 的使用方式
- 浅渲染
浅渲染是 Enzyme 提供的一种测试方式，它用于测试组件的输出，但并不会渲染组件的子组件。浅渲染可以帮助我们快速测试组件的属性和状态，而不必担心它的子组件是否也被正确渲染。
下面是一个简单的例子，假设我们有一个 Hello 组件，它接受一个名字作为参数，并输出 Hello，name：
-- -------------------- ---- ------- ------ ----- ---- -------- ----- ----- ------- --------------- - -------- - ------ ----------- ------------------------- - - ------ ------- ------展开代码
我们可以使用 Enzyme 来测试这个组件的输出，如下所示：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ ----- ---- ---------- ---------------- ---- -- -- - ----------- --- ------- ------ -- -- - ----- ------- - -------------- ------------ ---- -------------------------------------- --------- --- ---展开代码
代码中首先使用了 shallow 方法来渲染 Hello 组件，然后使用 text 方法获取组件的输出，最后使用断言判断输出是否符合预期。
- 全渲染
全渲染是 Enzyme 提供的另一种测试方式，它会渲染整个组件树，包括子组件。全渲染可以帮助我们测试组件的交互以及子组件的渲染情况。
下面是一个简单的例子，假设我们有一个 Counter 组件，它包含一个计数器和两个按钮，可以实现增加和减少计数器的功能：
-- -------------------- ---- ------- ------ ----- ---- -------- ----- ------- ------- --------------- - ----- - - ------ - -- -------------- - -- -- - ----------------------- -- -- ------ --------------- - - ---- -- -------------- - -- -- - ----------------------- -- -- ------ --------------- - - ---- -- -------- - ------ - ----- ----------- ------------------------ ------- ---------------------------------------- ------- ---------------------------------------- ------ -- - - ------ ------- --------展开代码
我们可以使用 Enzyme 来测试这个组件的交互，如下所示：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----- - ---- --------- ------ ------- ---- ------------ ------------------ ---- -- -- - -------------- --- ---------- --- ------- -- -- - ----- ------- - -------------- ---- -------------------------------------------------- ---- ----------------------------------------------- -------------------------------------------------- ---- ----------------------------------------------- -------------------------------------------------- ---- --- ---展开代码
代码中首先使用了 mount 方法来渲染 Counter 组件，然后使用 find 方法找到按钮，并使用 simulate 方法模拟按钮的点击事件，最后使用断言判断计数器是否正确增加和减少。
- 静态渲染
Enzyme 还提供了一种叫做 render 的静态渲染方式，它类似于全渲染，但它只会渲染组件的静态输出，不会包含交互逻辑。静态渲染可以帮助我们进行快速渲染测试，并且不需要考虑组件的交互逻辑。
下面是一个简单的例子，假设我们有一个 List 组件，它接受一个数据列表作为参数，并输出一个列表：
-- -------------------- ---- ------- ------ ----- ---- -------- ----- ---- ------- --------------- - -------- - ------ - ---- -------------------------- -- - --- ---------------------- --- ----- -- - - ------ ------- -----展开代码
我们可以使用 Enzyme 来测试这个组件的静态输出，如下所示：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------ - ---- --------- ------ ---- ---- --------- --------------- ---- -- -- - ----------- --- ------- ------ -- -- - ----- ----- - ------ --- ----- --- ----- ---- ----- ------- - ------------ ------------- ---- ------------------------------------------------------ -------------------- ------ -- - ---------------------------------------------------------- --- --- ---展开代码
代码中首先使用了 render 方法来渲染 List 组件，然后使用 find 方法找到列表项，并使用断言判断列表项是否正确渲染。
四、Enzyme 的检查器
Enzyme 提供了一些检查器，可以帮助我们更方便地检查组件的输出是否符合预期。下面是 Enzyme 的一些常用检查器：
- exist 和 length
exist 检查器用于判断元素是否存在，length 检查器用于判断元素数量是否符合预期。下面是一个例子：
expect(wrapper.find('div')).toExist(); expect(wrapper.find('div')).toHaveLength(3);
- text 和 html
text 检查器用于获取元素的文本内容，html 检查器用于获取元素的 HTML 内容。下面是一个例子：
expect(wrapper.find('div').first()).toHaveText('Hello, World!'); expect(wrapper.find('div').last()).toHaveHtml('<strong>Hello</strong>, World!');
- prop
prop 检查器用于判断组件的属性是否符合预期。下面是一个例子：
expect(wrapper.find(MyComponent).prop('color')).toEqual('blue'); expect(wrapper.find(MyComponent).prop('value')).toBeUndefined();
- state
state 检查器用于判断组件的状态是否符合预期。下面是一个例子：
expect(wrapper.find(MyComponent).state('isOpened')).toEqual(true); expect(wrapper.find(MyComponent).state('value')).toBeUndefined();
五、总结
本篇文章介绍了 Enzyme 的基本用法和检查器，希望对你对 React 单元测试有所帮助。在实际的开发中，通过良好的单元测试可以帮助我们更快速地发现和修复 bug，也可以增强代码的可维护性和可读性。祝愿大家越来越熟练掌握 React 单元测试技术，为自己、为团队、为产品带来更好的价值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/665762dcd3423812e4cacb42
