JavaScript 测试系列实战(一):使用 Jest 和 Enzyme 测试 React 组件

用户头像
图雀社区
关注
发布于: 2020 年 08 月 24 日
JavaScript 测试系列实战(一):使用 Jest 和 Enzyme 测试 React 组件

本文翻译自 wanago.io 系列测试教程,翻译权限已得到原作者的许可。



你或许早已经知道“单元测试”“端到端测试”这些名词,但从未真正付诸实践。在这一系列实战教程中,我们将手把手带你掌握 Jest、Enzyme、Cypress 等测试利器,帮助我们从 bug 的沼泽中挣脱出来,成为一个无往不利的高阶前端开发者!



本篇教程是 JavaScript 测试系列实战 的第一篇教程,首先介绍了测试的类型,然后主要通过一个 React 项目教会你如何使用 Jest 编写第一个测试,然后使用 Enzyme 对 React 组件进行浅层渲染,以方便对不同层次的组件进行细粒度测试,当学习了这篇教程之后,你将对基础的测试编写、组件的测试有一个比较好的了解。



初识 Jest 单元测试



测试是检查代码的代码,能够大大增强我们对应用的信心。更重要的是,测试会阻止你在修复一件事情的同时破坏另一件事情,让我们能够放开手脚进行功能的添加与大规模重构。您可以测试应用程序的许多方面,从单个函数及其返回值到在浏览器中运行的复杂应用程序。万丈高楼平地起,让我们先来了解一下有哪些测试。



测试的类型



单元测试



单元测试的目标可以是一个函数,一个类,或者一个模块。单元测试应该是相互隔离和独立的。对于给定的输入,单元测试检查结果。通过及早发现问题并避免 bug 回归,它可以帮助我们确保代码的各个部分按预期工作。



集成测试



即使所有单元测试都通过了,我们的应用仍然可能会崩溃。集成测试则是用来测试跨模单元/模块的过程,可以很好地确保我们的代码能够作为一个整体运行。



端到端测试(E2E)



与其他类型的测试不同,E2E 测试总是在浏览器(或类浏览器)环境中运行。它可能是一个实际的浏览器,可以打开并在其中运行测试;也可能是一个无头(Headless)的浏览器环境,这是一个没有用户界面的浏览器。E2E 测试的重点是在我们正在运行的应用程序中模拟实际用户(例如模拟滚动、单击和键入等行为),并检查我们的应用程序是否从实际用户的角度运行良好。



在这一系列教程中,我们将会从零开始,一步步带你熟悉从单元测试到端到端测试的方方面面。我们将会在一个 React 项目中实践所学到的自动化测试技术。首先用 Create React App(CRA)搭建项目脚手架:



create-react-app javascript-test-series



然后我们删除 src 目录下所有预创建的文件(当然你也可以手动删除):



rm src/*



一切准备就绪!让我们开始吧。



编写第一个单元测试



编写一个单元测试实际上要比你想象得简单很多。首先创建 divide.js ,在其中编写一个 divide 函数:



// divide.js
function divide(a, b) {
return a / b;
}
module.exports = divide;



然后创建测试文件 divide.test.js ,代码如下:



// divide.test.js
const divide = require('./divide');
test('dividing 6 by 3 equals 2', () => {
expect(divide(6, 3)).toBe(2);
});



作为本系列教程的第一个 Jest 测试,我们来详细讲解一下:



  • 我们先导入需要测试的单元/模块

  • test 函数定义了一个测试用例,第一个参数就是用例描述,一般是一句完整的描述,例如上面的 dividing 6 by 3 equals 2 ;第二个参数则是一个待执行的测试函数

  • 在测试函数中,最重要的组成部分就是断言(Assertion),例如上面的 expect(divide(6, 3)).toBe(2)

  • 断言的核心是 expect 函数,它接受一个表达式,然后后面可以调用 Matcher 来测试该表达式是否符合条件,例如这里我们就使用了最常用的 toBe Matcher;Jest 还提供了大量的 Matcher,可以帮助我们写出更简洁可读的断言语句,可参考 Expect API



CRA 已经为我们配置好了 Jest,这里直接运行 npx jest 命令,就可以看到测试结果了:



PASS ./divide.test.js
✓ dividing 6 by 3 equals 2 (5ms)



提示

>

CRA 也配置了 test 命令,但是提供了比较复杂的功能配置(例如 Watch 模式等),可能会让初学 Jest 的你不知所措。因此这里建议直接使用 npx jest 执行测试。



编写第一组测试



每个测试文件通常有多个测试用例。Jest 允许我们通过 describe 函数对测试用例进行分组,它创建了一个可以组合多个测试的块。让我们对全局 Math 对象运行一些测试(希望浏览器工程师和 Node 开源项目维护者不要来打我),创建 math.test.js ,代码如下:



// math.test.js
describe('in the math global object', () => {
describe('the random function', () => {
it('should return a number', () => {
expect(typeof Math.random()).toEqual('number');
});
it('should return a number between 0 and 1', () => {
const randomNumber = Math.random();
expect(randomNumber).toBeGreaterThanOrEqual(0);
expect(randomNumber).toBeLessThan(1);
});
});
describe('the round function', () => {
it('should return a rounded value of 4.5 being 5', () => {
expect(Math.round(4.5)).toBe(5);
});
});
});



你也许注意到了这里我们用了 it 函数而不是 test 函数,这两者实际上是完全一样的。



这样对测试进行分组可以使我们的代码更加清晰。在关注应用程序的代码质量的同时,我们也应该确保测试代码的质量,这样我们才有足够的动力不断去维护测试代码,从而确保我们的项目能够保持健壮。



除了使代码更具可读性之外,它还有助于在出现错误时提供更好的错误消息。如果这里我们将第一条测试用例改为 expect(typeof Math.random()).toEqual('string') ,那么再运行 npx jest ,就会出现如下错误信息:



FAIL ./math.test.js
● in the math global object › the random function › should return a number

expect(received).toEqual(expected)

Expected value to equal:
"string"
Received:
"number"



是不是一目了然呢?



小结



在这一小节中,我们首先了解了测试有哪些类型。然后我们在 CRA 脚手架中编写了一个简单的函数,并为之编写了第一个单元测试,熟悉了测试用例、断言、Matcher 这些关键概念,并成功地通过了测试。接着,我们又编写了一个包含多个用例的测试文件,并通过 describe 函数将测试用例组织得井井有条。



初识 Enzyme:编写第一个 React 组件测试



很显然,我们不会仅仅满足于测试像 divide 那样简单的函数,我们希望能够测试一个 React 组件,但是和一个普通的 JavaScript 函数不同,测试一个 React 组件还需要两个关键的问题:1)怎么渲染待测试的组件;2)怎么测试渲染出来的组件。



所幸的是,Airbnb 作为重度使用 React 的先驱,早就提出了专门的解决方案:Enzyme



安装和配置 Enzyme



首先安装 Enzyme 和相应的 React 适配器:



npm install enzyme enzyme-adapter-react-16



我们需要配置一下 Enzyme,才能在 Jest 测试文件中使用它。创建 src/setupTests.js ,代码如下:



// src/setupTests.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });



浅层渲染



Enzyme 提供的一个重要功能便是组件的浅层渲染(Shallow Rendering)。它允许我们在运行测试时,只渲染父组件而不渲染其所有的子组件。浅层渲染十分快速,因此非常适合单元测试。



首先让我们创建一个简单的 React 组件,创建 src/App.js ,代码如下:



// src/App.js
import React from 'react';
const App = () => {
return <h1>Hello world!</h1>;
};
export default App;



编写 App 组件对应的测试文件 src/App.test.js ,代码如下:



// src/App.test.js
import React from 'react';
import { shallow } from 'enzyme';
import App from './App';
describe('app component', () => {
it('contains a header with the "Hello world!"', () => {
const app = shallow(<App />);
expect(app.containsMatchingElement(<h1>Hello world!</h1>)).toEqual(true);
});
});



可以看到,这里我们用 shallow 函数来浅层渲染 App 组件得到 app ,并且调用其 containsMatchingElement 来判断渲染后的 App 组件是否包含 <h1>Hello world!</h1> 元素。



Enzyme 浅层渲染后的组件还包括其他测试方法,可参考 https://enzymejs.github.io/enzyme/docs/api/shallow.html



通过 npm test 命令,我们就可以看到刚才的测试通过了:



PASS app/App.test.js
app component
✓ contains a header with the "Hello world!"



测试更复杂的组件



在实际的前端开发中,我们的组件要复杂很多。本着循序渐进的原则,我们稍微前进一步:来编写一个接受 props 的组件,并根据数据来决定渲染结果。



配置 jest-enzyme



你应该还记得,在刚才的测试代码中,我们还是使用了 Jest 自带的 Matcher(toEqual)。但实际上,社区还提供了更好的选择——专门为 Enzyme 定制的 Matcher 库:enzyme-matchers。这些 Matcher 使得编写断言语句更轻松、更具可读性。



我们通过 npm 来安装 jest-enzyme:



npm install jest-enzyme



相应地在 src/setupTests.js 中添加相应的配置:



// src/setupTests.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import 'jest-enzyme';
configure({ adapter: new Adapter() });



编写 TodoList 组件



这次,我们还是编写一个熟悉的 TodoList 组件。创建 src/TodoList.js ,代码如下:



// src/TodoList.js
import React from 'react';
const ToDoList = (props) => {
return (
<ul>
{props.tasks.map((taskName, index) => (
<li key={index}>{taskName}</li>
))}
</ul>
);
};
export default ToDoList;



可以看到,这个组件接受一个 tasks 数组,并将其渲染成一个列表。



编写 TodoList 组件测试



先思考一下,如果要测试上面的 TodoList 组件,要考虑哪些情况?不难想到主要是两种情况:



  • 传入的 tasks 数组为空

  • 传入的 tasks 数组不为空



对应这两种情况,我们开始编写测试。创建 src/TodoList.test.js ,代码如下:



// src/TodoList.test.js
import React from 'react';
import { shallow } from 'enzyme';
import ToDoList from './ToDoList';
describe('ToDoList component', () => {
describe('when provided with an empty array of tasks', () => {
it('contains an empty <ul> element', () => {
const toDoList = shallow(<ToDoList tasks={[]} />);
expect(toDoList).toContainReact(<ul />);
});
it('does not contain any <li> elements', () => {
const toDoList = shallow(<ToDoList tasks={[]} />);
expect(toDoList.find('li').length).toEqual(0);
});
});
describe('when provided with an array of tasks', () => {
it('contains a matching number of <li> elements', () => {
const tasks = ['Wash the dishes', 'Make the bed'];
const toDoList = shallow(<ToDoList tasks={tasks} />);
expect(toDoList.find('li').length).toEqual(tasks.length);
});
});
});



可以看到在第一个测试用例中,我们使用了 toContainReact 这个 Matcher,它的含义十分明显,一目了然;在后面的测试用例中,我们通过 todoList.find('li') 来获取 li 元素数组,并判断它的长度是否符合要求。



提示

>

你也许发现我们并没有去验证 TodoList 每一项是否符合,这是因为我们用了 Enzyme 的浅层渲染,这意味着所有的 children 都是处于未渲染状态,当然就无法验证内容是否正确了。我们将在下一篇教程中讲解如何去更“深层”地去测试我们的组件。



运行 npm test ,查看测试结果,全部通过:



PASS app/App.test.js
PASS app/components/ToDoList/ToDoList.test.js

Test Suites: 2 passed, 2 total
Tests: 4 passed, 4 total
Snapshots: 0 total
Time: 1.41s
Ran all test suites.



小结



在过去的两个小节中,我们了解、安装和配置了 Enzyme,并且接触了 shallow 浅层渲染这个单元测试利器,并且循序渐进测试了两个 React 组件。但是你应该也注意到了,有些时候浅层渲染并不能完全满足我们的需求,Enzyme 还提供了其他渲染方式以供测试。我们在下篇教程中将讲解新的渲染方式,并介绍快照测试以及 mock 数据,不见不散哦!



❤️ 爱心三连击



1.看到这里了就点个赞支持下吧,你的 「赞」 是我创作的动力。



2.关注公众号 「图雀社区」 ,「汇聚精彩的免费技术实战教程」!



3.本文已收录在图雀社区 Github https://github.com/tuture-dev/javascript-test-series,求个小星星,感谢Star。



发布于: 2020 年 08 月 24 日 阅读数: 45
用户头像

图雀社区

关注

一只图雀 @ 公众号「图雀社区」 2019.12.14 加入

汇集精彩的免费实战教程,主站 https://tuture.co

评论

发布
暂无评论
JavaScript 测试系列实战(一):使用 Jest 和 Enzyme 测试 React 组件