vue前端怎么代码自测_Vue前端Jest自动化测试入坑( 上 ）

前话

关于前端测试，关注点更侧重于行为正确而不是数据正确，你的测试结果不需要考虑后台返回的数据是否正确，而是能否正常触发请求，拿到结果后能否按照设计流程正常执行代码

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 讲一讲如何进行一个完整测试

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[Vue前端Jest自动化测试入坑( 上 )]http://www.zyiz.net/tech/detail-107996.html