前端自动化测试（二）
上一篇文章，咱们已经讲述了Jest中的基本使用，这一篇咱们来讲说如何深度使用Jestjavascript
在测试中咱们会遇到不少问题，像如何测试异步逻辑，如何mock接口数据等...java
经过这一篇文章，可让你在开发中对Jest的应用游刃有余，让咱们逐一击破各个疑惑吧！ios
1.Jest进阶使用
1.1 异步函数的测试
提到异步无非就两种状况，一种是回调函数的方式，另外一种就是如今流行的promise方式web
export const getDataThroughCallback = fn => {
setTimeout(() => {
fn({
name: "webyouxuan"
});
}, 1000);
};
export const getDataThroughPromise = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
name: "webyouxuan"
});
}, 1000);
});
};
咱们来编写async.test.js方法npm
import {getDataThroughCallback,getDataThroughPromise} from './3.getData';
// 默认测试用例不会等待测试完成，因此增长done参数，当完成时调用done函数
it('测试传入回调函数 获取异步返回结果',(done)=>{ // 异步测试方法能够经过done
getDataThroughCallback((data)=>{
expect(data).toEqual({
name:'webyouxuan'
});
done();
})
})
// 返回一个promise 会等待这个promise执行完成
it('测试promise 返回结果 1',()=>{
return getDataThroughPromise().then(data=>{
expect(data).toEqual({
name:'webyouxuan'
});
})
})
// 直接使用async + await语法
it('测试promise 返回结果 2',async ()=>{
let data = await getDataThroughPromise();
expect(data).toEqual({
name:'webyouxuan'
});
})
// 使用自带匹配器
it('测试promise 返回结果 3',async ()=>{
expect(getDataThroughPromise()).resolves.toMatchObject({
name:'webyouxuan'
})
})
2.Jest中的mock
2.1 模拟函数jest.fn()
为何要模拟函数呢？来看下面这种场景，你要如何测试json
export const myMap = (arr,fn) =>{
return arr.map(fn)
}
打眼一看很简单，咱们只须要判断函数的返回结果就能够了，像这样axios
import { myMap } from "./map";
it("测试 map方法", () => {
let fn = item => item * 2;
expect(myMap([1, 2, 3], fn)).toEqual([2, 4, 6]);
});
可是咱们想更细致一些，像每一次调用函数传入的是不是数组的每一项，函数是否被调用了三次，说的更明确些就是想追溯函数具体的执行过程！segmentfault
import { myMap } from "./map";
it("测试 map 方法", () => {
// 经过jest.fn声明的函数能够被追溯
let fn = jest.fn(item => (item *= 2));
expect(myMap([1, 2, 3], fn)).toEqual([2, 4, 6]);
// 调用3次
expect(fn.mock.calls.length).toBe(3);
// 每次函数返回的值是 2,4,6
expect(fn.mock.results.map(item=>item.value)).toEqual([2,4,6])
});
详细看下这个mock中都有什么东东
2.2 模拟文件jest.mock()
咱们但愿对接口进行mock，能够直接在__mocks__目录下建立同名文件，将整个文件mock掉，例如当前文件叫api.jsapi
import axios from "axios";
export const fetchUser = ()=>{
return axios.get('/user')
}
export const fetchList = ()=>{
return axios.get('/list')
}
建立__mocks__/api.js数组
export const fetchUser = ()=>{
return new Promise((resolve,reject)=> resolve({user:'webyouxuan'}))
}
export const fetchList = ()=>{
return new Promise((resolve,reject)=>resolve(['香蕉','苹果']))
}
开始测试
jest.mock('./api.js'); // 使用__mocks__ 下的api.js
import {fetchList,fetchUser} from './api'; // 引入mock的方法
it('fetchUser测试',async ()=>{
let data = await fetchUser();
expect(data).toEqual({user:'webyouxuan'})
})
it('fetchList测试',async ()=>{
let data = await fetchList();
expect(data).toEqual(['香蕉','苹果'])
})
这里须要注意的是，若是mock的api.js方法不全，在测试时可能还须要引入原文件的方法，那么须要使用jest.requireActual('./api.js') 引入真实的文件。
这里咱们须要考虑这样作是否是有些麻烦呢，其实只是想将真正的请求mock掉而已，那么咱们是否是能够直接mock axios方法呢？
在__mocks__下建立 axios.js，重写get方法
export default {
get(url){
return new Promise((resolve,reject)=>{
if(url === '/user'){
resolve({user:'webyouxuan'});
}else if(url === '/list'){
resolve(['香蕉','苹果']);
}
})
}
}
当方法中调用axios时默认会找__mocks__/axios.js
jest.mock('axios'); // mock axios方法
import {fetchList,fetchUser} from './api';
it('fetchUser测试',async ()=>{
let data = await fetchUser();
expect(data).toEqual({user:'webyouxuan'})
})
it('fetchList测试',async ()=>{
let data = await fetchList();
expect(data).toEqual(['香蕉','苹果'])
})
2.3 模拟Timer
接着来看这个案例，咱们指望传入一个callback，想看下callback可否被调用
export const timer = callback=>{
setTimeout(()=>{
callback();
},2000)
}
所以咱们很容易写出了这样的测试用例
import {timer} from './timer';
it('callback 是否会执行',(done)=>{
let fn = jest.fn();
timer(fn);
setTimeout(()=>{
expect(fn).toHaveBeenCalled();
done();
},2500)
});
有没有以为这样很蠢，若是时间很长呢？不少个定时器呢？这时候咱们就想到了mock Timer
import {timer} from './timer';
jest.useFakeTimers();
it('callback 是否会执行',()=>{
let fn = jest.fn();
timer(fn);
// 运行全部定时器，若是须要测试的代码是个秒表呢？
// jest.runAllTimers();
// 将时间向后移动2.5s
// jest.advanceTimersByTime(2500);
// 只运行当前等待定时器
jest.runOnlyPendingTimers();
expect(fn).toHaveBeenCalled();
});
3. Jest中的钩子函数
为了测试的便利，Jest中也提供了相似于Vue同样的钩子函数，能够在执行测试用例前或者后来执行
class Counter {
constructor() {
this.count = 0;
}
add(count) {
this.count += count;
}
}
module.exports = Counter;
咱们要测试Counter类中add方法是否符合预期，来编写测试用例
import Counter from './hook'
it('测试 counter增长 1 功能',()=>{
let counter = new Counter; // 每一个测试用例都须要建立一个counter实例，防止相互影响
counter.add(1);
expect(counter.count).toBe(1)
})
it('测试 counter增长 2 功能',()=>{
let counter = new Counter;
counter.add(2);
expect(counter.count).toBe(2)
})
咱们发现每一个测试用例都须要基于一个新的counter实例来测试，防止测试用例间的相互影响，这时候咱们能够把重复的逻辑放到钩子中！
钩子函数
- beforeAll 在全部测试用例执行前执行
- afteraAll 在全部测试用例执行后
- beforeEach 在每一个用例执行前
- afterEach 在每一个用例执行后
import Counter from "./hook";
let counter = null;
beforeAll(()=>{
console.log('before all')
});
afterAll(()=>{
console.log('after all')
});
beforeEach(() => {
console.log('each')
counter = new Counter();
});
afterEach(()=>{
console.log('after');
});
it("测试 counter增长 1 功能", () => {
counter.add(1);
expect(counter.count).toBe(1);
});
it("测试 counter增长 2 功能", () => {
counter.add(2);
expect(counter.count).toBe(2);
});
钩子函数能够屡次注册，通常咱们经过
describe 来划分做用域
import Counter from "./hook";
let counter = null;
beforeAll(() => console.log("before all"));
afterAll(() => console.log("after all"));
beforeEach(() => {
counter = new Counter();
});
describe("划分做用域", () => {
beforeAll(() => console.log("inner before")); // 这里注册的钩子只对当前describe下的测试用例生效
afterAll(() => console.log("inner after"));
it("测试 counter增长 1 功能", () => {
counter.add(1);
expect(counter.count).toBe(1);
});
});
it("测试 counter增长 2 功能", () => {
counter.add(2);
expect(counter.count).toBe(2);
});
// before all => inner before=> inner after => after all
// 执行顺序很像洋葱模型 ^-^
4.Jest中的配置文件
咱们能够经过jest命令生成jest的配置文件
npx jest --init
会提示咱们选择配置项：
➜ unit npx jest --init The following questions will help Jest to create a suitable configuration for your project # 使用jsdom ✔ Choose the test environment that will be used for testing › jsdom (browser-like) # 添加覆盖率 ✔ Do you want Jest to add coverage reports? … yes # 每次运行测试时会清除全部的mock ✔ Automatically clear mock calls and instances between every test? … yes
在当前目录下会产生一个jest.config.js的配置文件
5.Jest覆盖率
刚才产生的配置文件咱们已经勾选须要产生覆盖率报表，因此在运行时咱们能够直接增长 --coverage参数
"scripts": {
"test": "jest --coverage"
}
能够直接执行npm run test，此时咱们当前项目下就会产生coverage报表来查看当前项目的覆盖率
----------|----------|----------|----------|----------|-------------------| File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s | ----------|----------|----------|----------|----------|-------------------| All files | 100 | 100 | 100 | 100 | | hook.js | 100 | 100 | 100 | 100 | | ----------|----------|----------|----------|----------|-------------------| Test Suites: 1 passed, 1 total Tests: 2 passed, 2 total Snapshots: 0 total Time: 1.856s, estimated 2s
命令行下也会有报表的提示，jest增长覆盖率仍是很是方便的~
- Stmts表示语句的覆盖率
- Branch表示分支的覆盖率(if、else)
- Funcs函数的覆盖率
- Lines代码行数的覆盖率
到此咱们的Jest常见的使用已经基本差很少了！下一篇文章咱们来看看如何利用Jest来测试Vue项目，敬请期待！
相关文章
- 1. 前端自动化测试（二）
- 2. 前端自动化测试
- 3. 前端自动化测试初探（一）
- 4. 聊一聊前端自动化测试
- 5. 前端自动化测试（一）
- 6. react前端自动化测试： jest + enzyme
- 7. 前端自动化测试工具——SlimerJS
- 8. 前端自动化测试（三）
- 9. 前端自动化测试（四）
- 10. webim 前端自动化测试框架
- 更多相关文章...
- • Maven 自动化部署 - Maven教程
- • Maven 构建 & 项目测试 - Maven教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • SpringBoot中properties文件不能自动提示解决方法
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 前端自动化测试（二）
- 2. 前端自动化测试
- 3. 前端自动化测试初探（一）
- 4. 聊一聊前端自动化测试
- 5. 前端自动化测试（一）
- 6. react前端自动化测试： jest + enzyme
- 7. 前端自动化测试工具——SlimerJS
- 8. 前端自动化测试（三）
- 9. 前端自动化测试（四）
- 10. webim 前端自动化测试框架