jest-vue前端自动化测试实践01—概念&环境搭建

2019 年 11 月 1 日
筆記

jest-vue前端自动化测试实践01—概念&环境搭建

toc

Write By CS逍遥剑仙我的主页: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email: [email protected]本节代码地址 https://github.com/csxiaoyaojianxian/JavaScriptStudy 下的自动化测试目录

1. 概念

1.1 前端自动化测试的意义

在日常的开发中，前端错综复杂的变化引发的bug往往令开发者头疼，或多或少经历过 修完东墙西墙倒 的经历，此时前端自动化测试就显得非常重要。前端的自动化测试无非也是编写测试用例，在开发过程中和版本打包发布时执行跑通全部测试用例。如果是一个短平快的小项目，引入前端自动化测试，编写测试用例，无疑只会增加开发成本，然而当项目扩大、迭代频繁、逻辑复杂、需求反复变更的情况下，回归测试的成本是巨额的，自动化测试的优势就能体现出来。

自动化测试的收益 = 迭代次数 * 全手动执行成本 - 首次自动化成本 - 维护次数 * 维护成本

尽早引入前端自动化测试不仅能够减少项目 bug 出现概率(尤其是回归测试中的 bug)，还能更好地进行代码组织，增强项目的可维护性，尤其对于工程质量较差的项目，收益是巨大的。

1.2 分类

前端自动化测试分两类：TDD (Test-Driven Development) 测试驱动开发 和 BDD (Behavior Driven Development) 行为驱动开发。TDD 顾名思义，开发者根据需求先编写测试用例，再逐步开发，最终满足全部测试用例的需求。刚开始的时候，只有测试用例，未进行功能开发，执行测试用例，满屏是红色的测试用例不通过提示，随着测试用例被满足变绿，最终全部变绿，功能开发完成，因此前端自动化测试也被叫做 Red-Green Development。

1.2.1 TDD (Test-Driven Development) 测试驱动开发

TDD 先写测试再写代码，单位是模块，多用于 单元测试
重点在测试代码，属于 白盒测试
测试内容是模块，速度快，但是忽略模块间依赖，安全感低

TDD 有以下优势：

长期减少回归BUG
代码质量会更好（组织、可维护性）
测试覆盖率高

1.2.2 BDD (Behavior Driven Development) 行为驱动开发

BDD 先写代码再写测试，测试单位是功能，多用于 集成测试
重点在测试 UI（DOM）功能，属于 黑盒测试
测试内容是整套操作流程，速度慢，往往需要多个模块配合，安全感高

1.3 工具选择

前端近几年涌现出很多优秀的测试工具：

karma – Google Angular团队开发的测试运行平台，配置简单灵活，能够很方便在多个真实浏览器中运行测试
mocha – 很优秀的测试框架，有完善的生态系统，简单的测试组织方式，不对断言库和工具做任何限制，非常灵活
jest – facebook出品的大而全的测试框架，React官方推荐的单元测试框架，配置简单运行速度快

还有很多其他的前端测试框架，但大同小异，无非是对断言和测试桩等工具的集成度不同，论成熟度首推 mocha，论效率首推 jest。

jest是 Facebook 开源的 JavaScript 测试框架，它自动集成了断言、JsDom、覆盖率报告等开发者所需要的所有测试工具，是一款几乎零配置的测试框架，而且速度很快，此处选择 jest 作为测试工具。

2. jest 环境搭建

2.1 jest 安装

jest 需要自动运行测试脚本，node 环境是必不可少的，如果从头搭建，首先得初始化项目 package.json 并安装 jest：

$ npm init  $ npm install jest -D

jest 默认不支持 es6，需要使用 babel 来支持 es6，安装 babel：

$ npm install @babel/core @babel/preset-env -D

配置 babel，修改 .babelrc 文件

{      "presets": [          ["@babel/preset-env", {              "targets": {                  "node": "current"              }          }]      ]  }

2.2 jest 初始化

安装完 jest 以后，初始化 jest 并根据需要修改根目录下生成的配置文件 jest.config.js

$ npx jest --init

修改 package.json 中的 scripts，添加执行指令

(1) 普通执行测试，即 $ npx jest

{  	"test": "jest"  }

(2) 生成覆盖率报告，即 $ npx jest —coverage

{  	"coverage": "jest --coverage"  }

(3) 持续监听变化，默认 o 模式

{  	"test": "jest --watch"  }

(4) 持续监听所有文件变化

{  	"test": "jest --watchAll"  }

2.3 编写测试用例

先写一个功能模块 init.js

function add (a, b) { return a + b; }  function minus (a, b) { return a - b; }  function multi (a, b) { return a * b; }  module.exports = { add, minus, multi }

编写对应测试用例文件 init.test.js

const math = require('./init.js');  const {add, minus, multi} = math;  // 断言  test('测试加法 3 + 7', () => { expect(add(3, 7)).toBe(10); })  test('测试减法 3 - 3', () => { expect(minus(3, 3)).toBe(0); })  test('测试乘法 3 * 3', () => { expect(multi(3, 3)).toBe(9); })

执行测试，并在控制台观察结果

$ npm run test  $ npm run coverage

3. vue-cli 中使用 jest

现实项目中，往往不会从零搭建 jest 项目，更多的情况是，需要在一个脚手架已经搭建好的项目中引入自动化测试，此处在 vue-cli 基础上修改 jest 配置，安装好 jest 后需要修改项目根目录下的配置文件 jest.config.js，重点关注 testMatch 和 testPathIgnorePatterns 两个属性，testMatch 指定了匹配的测试用例文件的路径，而 testPathIgnorePatterns 则可以忽略指定文件，因此使用两个属性可以精确匹配到项目中所有的测试用例。

module.exports = {    ...    testMatch: [      '**/__tests__/**/*.(js|jsx|ts|tsx)'    ],    testPathIgnorePatterns: [      '.eslintrc.js'    ],    testURL: 'http://localhost/'  }

最后还需要在 package.json 中添加测试指令

{  	"test:unit": "vue-cli-service test:unit --watch"  }

执行对应指令即可在项目中执行测试

$ npm run test:unit