基本使用
- 安装
yarn add --dev jest - 新建功能文件 Sum,js
function Sum(a,b) {
return a + b;
}
module.exports = {
Sum}
- 新建测试文件 Sum.test.js (跟2中功能文件对应，jest会自动匹配)
const {
Sum} = require("./Sum.js");
test("测试求和方法: a+b", () => {
expect(Sum(1,2)).toBe(3);
})
- 修改 package.json 的配置
...
"scripts": {
"test": "jest"
}
...
- 运行 yarn test 即可。
jest配置文件
-
生成 jest.config.json 文件
npx jest --init -
生成代码覆盖率统计，如下：
npx jest --coverage
-
匹配器
tobe 精确匹配
更多内容参考这里 -
自动执行测试
package.json 中 增加--watchAll后缀
"scripts": {
"test": "jest --watchAll"
}
- 支持 es6 import导入方式
- 安装babel 依赖
yarn add @babel/[email protected] @babel/[email protected] --dev - 配置
.babelrc文件
{
"presets": [
[
"@babel/preset-env", {
"targets": {
"node": "current"
}
}
]
]
}
- require 引入 改有 import 导入
// const {Sum} = require("./Sum.js");
// 改有 import 导入
import {
Sum} from "./Sum.js";
test("测试求和方法: a+b", () => {
expect(Sum(1,2)).toBe(3);
})
异步代码测试
yarn add [email protected] --save. 安装 axios依赖- 编写 fetchData.js 和 fetchData.test.js 文件
fetchData.js
import Axios from "axios";
// 1. 有回调函数
export const fetchOne = (fn => {
Axios.get('http://redatao.com/api/blog/getColumns').then(res => {
fn(res)
})
})
// 2. 直接返回接口结果
export const fetchTwo = (fn => {
return Axios.get('http://redatao.com/api/blog/getColumns')
})
// 3. 请求一个404接口，但需要测试通过
export const fetchThree = (fn => {
return Axios.get('http://redatao.com/api/blog/getColumns')
})
// 4. 使用async、await获取异步结果
export const fetchFour = (fn => {
return Axios.get('http://redatao.com/api/blog/getColumns')
})
fetchData.test.js
import {
fetchOne, fetchTwo, fetchThree, fetchFour} from "./fetchData"
// 1. 关键点：done 代表 fetchData传入的回调函数执行之后才进行测试
test('测试带回调函数的 axios请求', (done) => {
fetchOne(data => {
expect(data).toEqual({
success: true
})
done();
})
})
// 2. 直接返回结果的请求
test('测试直接返回 结果的 axios请求', () => {
// 关键点：这需要 return，才能在请求结果返回后 再进行test
return fetchTwo().then(res => {
expect(res).toEqual({
success: true
})
})
})
// 3. 让404 接口通过测试
test('让404 接口通过测试', () => {
// 关键点：这里必须使用 断言 执行expect1次，否则测试不起作用
expect.assertions(1); // 断言，表示必须执行 expect 1次
return fetchThree().catch(err => {
expect(err.toString().indexOf('404') > -1).toBe(true)
})
})
// 4. 使用 async、await
test('使用async、await获取异步结果', async () => {
const response = await fetchFour();
expect(response.data).toEqual({
success: true
})
})
测试生命周期钩子
beforeAll()所有测试用例之前执行beforeEach()每个测试用例之前执行afterEach()每个测试用例之后执行afterAll()所有测试用例之后执行
tianxi.js
export default class NewGeneral {
choose(number) {
this.user = number == 1 ? '关羽' : '黄忠'
}
shuadao() {
this.fuwu = this.user + '给你耍大刀';
}
shejian() {
this.fuwu = this.user + '给你弯弓射箭';
}
}
tianxi.test.js
import NewGeneral from './tianxia'
const general = new NewGeneral();
// 所有测试用例之前
beforeAll(() => {
console.log('刘备开始打天下');
})
beforeEach(() => {
console.log('每次打仗之前先选将');
})
afterEach(() => {
console.log('每次打了胜仗要犒赏');
})
test('测试 关羽 耍大刀方法', () => {
general.choose(1)
general.shuadao()
console.log(general.fuwu);
expect(general.fuwu).toEqual('关羽给你耍大刀')
})
test('测试 黄忠 射箭方法', () => {
general.choose(2)
general.shejian()
console.log(general.fuwu);
expect(general.fuwu).toEqual('黄忠给你弯弓射箭')
})
// 所有测试用例之后执行
afterAll(() => {
console.log('刘备建立蜀汉政权，奠定三分天下大势');
})
测试用例分组
使用 describe 将相关内容包裹起来。如下变更：
tianxi.test.js
export default class NewGeneral {
choose(number) {
this.user = number == 1 ? '关羽' : '黄忠'
}
shuadao() {
this.fuwu = this.user + '给你耍大刀';
}
zhenshou() {
this.fuwu = this.user + '给你镇守荆州';
}
shejian() {
this.fuwu = this.user + '给你弯弓射箭';
}
lvedi() {
this.fuwu = this.user + '给你攻城略地';
}
}
tianxi.test.js
import NewGeneral from './tianxia'
const general = new NewGeneral();
// 所有测试用例之前
beforeAll(() => {
console.log('刘备开始打天下');
})
beforeEach(() => {
console.log('每次打仗之前先选将');
})
afterEach(() => {
console.log('每次打了胜仗要犒赏');
})
describe('关羽相关技能', () => {
test('测试 关羽 耍大刀方法', () => {
general.choose(1)
general.shuadao()
console.log(general.fuwu);
expect(general.fuwu).toEqual('关羽给你耍大刀')
})
test('测试 关羽 守城方法', () => {
general.choose(1)
general.zhenshou()
console.log(general.fuwu);
expect(general.fuwu).toEqual('关羽给你镇守荆州')
})
})
describe('黄忠相关技能', () => {
test('测试 黄忠 射箭方法', () => {
general.choose(2)
general.shejian()
console.log(general.fuwu);
expect(general.fuwu).toEqual('黄忠给你弯弓射箭')
})
test('测试 黄忠 攻城略地', () => {
general.choose(2)
general.lvedi()
console.log(general.fuwu);
expect(general.fuwu).toEqual('黄忠给你攻城略地')
})
})
// 所有测试用例之后执行
afterAll(() => {
console.log('刘备建立蜀汉政权，奠定三分天下大势');
})
