共计 6078 个字符，预计需要花费 16 分钟才能阅读完成。
上一篇文章，我们已经讲述了 Jest 中的基本使用，这一篇我们来说说如何深度使用Jest
在测试中我们会遇到很多问题，像如何测试 异步逻辑 ，如何mock 接口数据等 …
通过这一篇文章，可以让你在开发中对 Jest 的应用游刃有余，让我们逐一击破各个疑惑吧！
1.Jest 进阶使用
1.1 异步函数的测试
提到异步无非就两种情况，一种是 回调函数 的方式，另一种就是现在流行的 promise 方式
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 方法
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()
为什么要模拟函数呢？来看下面这种场景，你要如何测试
export const myMap = (arr,fn) =>{return arr.map(fn)
}打眼一看很简单，我们只需要判断函数的返回结果就可以了，像这样
import {myMap} from "./map";
it("测试 map 方法", () => {
let fn = item => item * 2;
expect(myMap([1, 2, 3], fn)).toEqual([2, 4, 6]);
});但是我们想更细致一些，像每一次调用函数传入的是否是数组的每一项，函数是否被调用了三次，说的更明确些就是想追溯函数具体的执行过程！
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.js
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 项目，敬请期待！
正文完