前话
关于前端测试，关注点更侧重于行为正确而不是数据正确，你的测试结果不需要考虑后台返回的数据是否正确，而是能否正常触发请求，拿到结果后能否按照设计流程正常执行代码
1. 学习前提
js + es6 + npm + git + vue
2. 学习目标
- 入门前端自动化测试
- 根据项目完成测试方案的选型
- 掌握主流前端测试工具的使用
3. 安装jest(本文基于版本24.8.0)
npm i --save-dev jest@24.8.0复制代码
4. Jest配置
npx jest --init复制代码
5. 为了正常使用ES模块需要安装babel(本文基于版本7.4.5)
npm i --save-dev @babel/core@7.4.5 @babel/preset-env@7.4.5复制代码
创建 babel 配置文件 .babelrc
{ "presets": [ [ "@babel/preset-env", { "targets": { "node": "current" } } ] ] }复制代码
babel 运行原理简介
6. 简单测试用例(实际开发中可以使用 jest 插件自动检测运行文件)
jest 运行时会查找项目下以 test.js 结尾的文件并运行测试文件,这里以 math.js 和 math.test.js 文件为例
- math.js
export function add (a, b) { return a + b } export function minus (a, b) { return a - b } 复制代码
- math.test.js
import { add, minus } from './math' test('测试加法 5 + 5', () => { expect(add(5, 5)).toBe(10) }) test('测试减法 10 - 5', () => { expect(minus(10, 5)).toBe(5) })复制代码
关于 test( ), expect( ).toBe( ) 方法是 jest 里主要的一些测试方法，后面也会继续介绍其它方法，想了解方法内部原理请参考jest官网或查看源码
7. 生成代码测试覆盖率报告
npx jest --coverage复制代码
到这里，一个简单的自动化测试流程就已经跑完了，简单吧^_^
当然，实际项目中的情况要比这复杂多，现在我们继续深入学习
8. Jest 匹配器
什么是匹配器？ 之前用例中 expect( a ).toBe( b ) 其实就是一个匹配器
匹配器通俗讲就是判断两个值a, b关系的规则
常用匹配器
// 匹配值相等 expect(a).toEqual(b) // 匹配 null expect(a).toBeNull() // 匹配 undefined expect(a).toBeUndefined() // 是否定义 expect(a).toBeDefined() // 是否为真 expect(a).toBeTruthy() // 是否为假 expect(a).toBeFalsy() // not 匹配器 (取反) expect(a).not.toBeFalsy() // 数字大小 a > b expect(a).toBeGreaterThan(b) // toBeGreaterThanOrEqual // 数字大小 a < b expect(a).toBeLessThan(b) // toBeLessThanOrEqual // 小数近似 expect(a).toBeCloseTo(b) // 字符串匹配 expect(a).toMatch('string') // 数组匹配 expect(arr).toContain(obj) // 异常检测 expect(fn).toThrow()复制代码
9. 监听模式
npx jest --watchAll npx jest --watch // 与 git 联合使用，自动检测修改过代码的文件复制代码
启动后按 w 可查看更多模式
10. 异步代码测试
以请求数据为例( 自行安装 axios )
// 使用 done 判断回调完成 test('测试异步', (done) => { axios.get('http://www.dell-lee.com/react/api/demo.json').then(res => { expect(res.data).toEqual({ success: true }) done() }) }) // 使用 assertions 规定 expect 执行次数 test('测试异步', () => { expect.assertions(1) return axios.get('http://www.dell-lee.com/react/api/demo.json').then(res => { expect(res.data).toEqual({ success: true }) }) }) // 使用 resolves 方法 // toMatchObject 匹配对象某个属性值 test('测试异步', () => { return expect(axios.get('http://www.dell-lee.com/react/api/demo.json')).resolves.toMatchObject({ data: { success: true } }) }) test('测试异步', async () => { await expect(axios.get('http://www.dell-lee.com/react/api/demo.json')).resolves.toMatchObject({ data: { success: true } }) }) // 使用 rejects 判断异常 test('测试异常', () => { return expect(axios.get('http://www.dell-lee.com/react/api/demo1.json')).rejects.toThrow() }) test('测试异常', async () => { await expect(axios.get('http://www.dell-lee.com/react/api/demo1.json')).rejects.toThrow() }) // 推荐写法 test('异步测试', async () => { const response = await axios.get('http://www.dell-lee.com/react/api/demo.json') expect(response.data).toEqual({ success: true }) })复制代码
11. Jest 中的钩子函数
// 全部测试前执行 beforeAll(() => { // 逻辑 }) // 每次测试前执行 beforeEach(() => { // 逻辑 }) // 全部测试后执行 afterAll(() => { // 逻辑 }) // 每次测试后执行 afterEach(() => { // 逻辑 }) // 分组测试 describe('描述',() => { // 测试案例... test()... })复制代码
12. Jest 中的 Mock()
此部分有许多高级用法，会结合异步测试对api请求测试做处理，实战中请多看官方文档，后续有时间我也会在写个专题
test('测试回调', () => { // mock 函数 捕获函数调用和返回结果 // 也可以自定义返回结果， const func = jest.fn() // runCallback要测试的回调函数 runCallback(func) expect(func.mock.calls).toBe('val') }) // 测试调用接口 import axios from 'axios' jest.mock('axios') test('测试请求', async () => { // 模拟返回，一般前端测试不会发真实请求 axios.get.mockResolvedValue({ data: 'hello'}) await getData().then(data => { expect(data).toBe('hello') }) })复制代码
待续
本篇上部至此告一段，都是总结一些Jest基础的东西，有点基础的同学其实看官方文档就能入门，我也只是学习时顺手写点东西加深下印象，希望对各位入坑有所帮助，下篇开始真正结合 Vue 讲一讲如何进行一个完整测试
