想获取更多原创好文，请搜索公众号关注我们吧~ 本文首发于政采云前端博客：前端自动化测试 —— Jest 测试框架应用
什么是自动化测试
在软件测试中，自动化测试指的是使用独立于待测软件的其他软件来自动执行测试、比较实际结果与预期并生成测试报告这一过程。在测试流程已经确定后，测试自动化可以自动执行的一些重复但必要的测试工作。也可以完成手动测试几乎不可能完成的测试。对于持续交付和持续集成的开发方式而言，测试自动化是至关重要的。 ——来自 WiKi 百科
为什么要用前端自动化测试
随着前端项目的发展，其规模和功能日益增加。为了提高项目的稳定性和可靠性，除了需要测试工程师外，前端自动化测试也成为了不可或缺的一环。采用前端自动化测试可以有效地提高代码质量，降低出错的概率，从而使项目更加健壮和更易维护。
前端自动化分类和思想
单元测试
又称为模块测试 ，是针对程序模块（软件设计的最小单位）来进行正确性检验的测试工作。在前端中，一个函数、一个类、一个模块文件，都可以进行单元测试，测试时每个模块都是互不干扰的。
集成测试
是在单元测试的基础上，测试在将所有的软件单元按照概要设计规格说明的要求组装成模块、子系统或系统的过程中各部分工作是否达到或实现相应技术指标及要求的活动。用户的开始操作到结束操作这一整个行为流程可以当做集成测试。
TDD 测试驱动开发（Test Driven Development）
开发流程：
TDD 是趋向于白盒测试，需要开发者对当前编写的模块思路足够清晰。
优势：
- 长期减少回归
bug。 - 代码质量更好，可维护性高。
- 测试覆盖率高（先写测试用例，再实现功能）。
- 错误测试代码不容易出现（测试在开发之前执行）。
BDD 行为驱动开发（Behavior Driven Development）
开发流程：
BDD 趋向于黑盒测试，只关注用户的一整套行为流程下来是否会成功。
优势：
- 对于用户行为的整个流程把控程度较高，对于开发人员来说这样安全感高。
如何自己写非框架测试用例
不使用测试框架，我们该如何测试自己的模块呢？如果我们想要测试下面的代码，应该需要两个值，一个是 期望值 ，另一个是函数执行的 结果值 ，我们需要对比两个值来进行判断当前函数是否通过了测试用例。
// index.js
function ZcyZooTeam(str) {
return 'Zcy' + str;
}
需要下面的 if / else 进行判断当前的期望值 value 和结果值 result 是否相等，如果相等说明我们的测试用例通过了。我们将这两段代码复制到浏览器中，下面的执行不会通过，并会抛出错误，只有我们将传入值改为 ZooTeam 才会成功执行。
// no-jest.js
const result = ZcyZooTeam('Zero');
const value = 'ZooTeam';
if(result !== value) {
throw Error(`ZcyZooTeam 结果应为${value}, 但实际结果为${result}`);
}
是否能简化？
如果我们有多个函数需要测试，你应该不想写许多个 if / else 代码块吧？所以我们要将上面的代码块进行优化成一个函数。
// no-jest.js
function expect(result) {
return {
// 用于判断是否为期望值
toBe(value) {
if(result !== value) {
throw Error(`结果应为${value}, 但实际结果为${result}`);
}
console.log('测试通过！');
}
}
}
// 执行测试
expect(ZcyZooTeam('Zero')).toBe('ZcyZooTeam');
经过上面的封装，我们就可以只写一行代码进行测试了！
如何能清晰的看到我测的是哪个呢？
虽然上面的封装只需要书写一行代码就可以测试了，但是我们不知道执行结果和测试用例之间的对应关系，我们需要输出的文字来告诉我们当前是哪个测试用例执行了。
// no-jest.js
// 再封装如下方法
function test(msg, fn) {
try {
fn();
console.log(msg + '测试通过！');
} catch (error) {
console.log(msg + '测试未通过！' + error);
}
}
test('测试ZcyZooTeam', () => {
expect(ZcyZooTeam('Zero')).toBe('ZcyZooTeam')
})
成功和失败都会进行提示，这样我们就可以知道当前是哪个测试用例成功/失败了。
Jest 的书写方式也是同上，如果上面的一整套代码了解了的话，你已经可以写 Jest 的测试脚本了，下面将进入 Jest 的配置。
如何使用 Jest 测试框架进行自动化测试？
主流的前端自动化测试框架
Jasmine
Jasmine 优点：易于学习和使用，支持异步测试，可以在浏览器和 Node.js 环境中运行，可以生成易于阅读的测试报告，可以与其他库和框架集成。
MOCHA
MOCHA 优点：支持异步测试和 Promise ，可以在浏览器和 Node.js 环境中运行，可以与其他库和框架集成，可以生成易于阅读的测试报告，可以使用各种插件和扩展来增强其功能。
Jest
Jest 是针对模块进行测试，单元测试对单个模块进行测试，集成测试对多个模块进行测试。
Jest 优点：速度快（单模块测试时，执行过的模块不会重复执行），API 简单，易配置，隔离性好（执行环境相对隔离，每个文件单独隔离互不干扰），监控模式（更灵活的运行各种测试用例），适配编辑器多，Snapshot （快照），多项目运行（后台前台测试用例并行测试），生成可视化覆盖率简单，Mock 丰富。
准备工作 —— Jest 的配置
npm i jest --save-D
// 初始化 jest 的配置文件
npx jest --init
// 你将在那个环境进行测试，回车即可选择
// 第一个是 node 环境、第二个是浏览器环境
? Choose the test environment that will be used for testing › - Use arrow-keys. Return to submit.
node
❯ jsdom (browser-like)
// 是否需要 jest 生成测试覆盖率报告
? Do you want Jest to add coverage reports? › (y/N)
// 是否需要在测试结束后清除模拟调用
? Automatically clear mock calls and instances between every test? › (y/N)
// 创建 jest.config.js 文件