Skip to content

Commit 64dd20d

Browse files
csxiaoyaojianxiancsxiaoyaojianxian
committed
jest
1 parent 16dc601 commit 64dd20d

File tree

8 files changed

+183
-0
lines changed

8 files changed

+183
-0
lines changed

‎13-自动化测试&mock数据/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# 自动化测试
2+
1. mockjs
3+
2. jest

‎13-自动化测试&mock数据/jest-test/01-init.test.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
const math = require('./01-init.js');
33
const {add, minus, multi} = math;
44

5+
// 断言
56
test('测试加法 3 + 7', () => {
67
expect(add(3, 7)).toBe(10);
78
})

‎13-自动化测试&mock数据/jest-test/06-hook.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/**
2+
* 钩子函数 / 分组作用域 / skip跳过
3+
* 1. describe 分组，可以限定作用域
4+
* 2. hook beforeAll / afterAll / beforeEach / afterEach
5+
* 3. only 用于跳过case
6+
*/
7+
export default class Counter {
8+
constructor () {
9+
this.number = 0
10+
}
11+
addOne () {
12+
this.number += 1
13+
}
14+
minusOne () {
15+
this.number -= 1
16+
}
17+
addTwo () {
18+
this.number += 2
19+
}
20+
minusTwo () {
21+
this.number -= 2
22+
}
23+
}

‎13-自动化测试&mock数据/jest-test/06-hook.test.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import Counter from './06-hook'
2+
3+
// 【 describe 】 分组，可以限定作用域
4+
describe('测试分组和钩子函数', () => {
5+
let counter = null
6+
7+
// 【 钩子函数 hook 】 beforeAll / afterAll / beforeEach / afterEach
8+
beforeAll(() => {
9+
console.log('beforeAll')
10+
})
11+
afterAll(() => {
12+
console.log('afterAll')
13+
})
14+
beforeEach(() => {
15+
console.log('beforeEach')
16+
// 实例化
17+
counter = new Counter()
18+
})
19+
afterEach(() => {
20+
console.log('afterEach')
21+
})
22+
23+
// 分组1
24+
describe('测试增加相关的代码', () => {
25+
// 使用 describe 限定作用域，该 beforeEach 不会对后面的同级 describe 产生影响
26+
beforeEach(() => {
27+
console.log('beforeEach test add')
28+
})
29+
// 【 only 】 用于跳过 case
30+
test.only('测试 Counter 的 addOne 方法', () => {
31+
console.log('case1')
32+
counter.addOne()
33+
expect(counter.number).toBe(11)
34+
})
35+
test('测试 Counter 的 addTwo 方法', () => {
36+
console.log('case2')
37+
counter.addTwo()
38+
expect(counter.number).toBe(2)
39+
})
40+
})
41+
42+
// 分组2
43+
describe('测试减少相关的代码', () => {
44+
test('测试 Counter 的 minusOne 方法', () => {
45+
console.log('case3')
46+
counter.minusOne()
47+
expect(counter.number).toBe(-1)
48+
})
49+
test('测试 Counter 的 minusTwo 方法', () => {
50+
console.log('case4')
51+
counter.minusTwo()
52+
expect(counter.number).toBe(-2)
53+
})
54+
})
55+
})

‎13-自动化测试&mock数据/jest-test/07.mock.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import axios from 'axios'
2+
3+
export const runCallback = (callback) => {
4+
callback(123)
5+
}
6+
7+
export const createObject = (classItem) => {
8+
new classItem()
9+
}
10+
11+
export const getData = () => {
12+
return axios.get('/api').then(res => res.data)
13+
}

‎13-自动化测试&mock数据/jest-test/07.mock.test.js‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import { runCallback, createObject, getData } from './07.mock'
2+
import axios from 'axios'
3+
4+
/**
5+
* mock作用：
6+
* 1. 捕获函数的调用和返回结果，以及this和调用顺序
7+
* 2. 自由设置返回结果
8+
* 3. 改变函数内部实现
9+
*/
10+
test('测试 callback 是否被执行', () => {
11+
// 使用 jest 生成一个 mock 函数，用来捕获函数调用
12+
const func1 = jest.fn()
13+
14+
// 模拟返回数据
15+
func1.mockReturnValueOnce(456).mockReturnValueOnce(789)
16+
// func1.mockReturnValue(10)
17+
18+
// 定义带返回的mock函数
19+
const func2 = jest.fn(() => { return 456 })
20+
// 等价于
21+
func2.mockImplementation(() => { return 456 })
22+
// func2.mockImplementationOnce(() => { return this })
23+
// func2.mockReturnThis
24+
25+
// 执行3次func1，1次func2
26+
runCallback(func1)
27+
runCallback(func1)
28+
runCallback(func1)
29+
runCallback(func2)
30+
31+
// 被执行
32+
expect(func1).toBeCalled()
33+
// 调用次数
34+
expect(func1.mock.calls.length).toBe(3)
35+
// 传入参数
36+
expect(func1.mock.calls[0]).toEqual([123])
37+
expect(func1).toBeCalledWith(123)
38+
// 返回结果
39+
expect(func2.mock.results[0].value).toBe(456)
40+
41+
// 输出mock
42+
console.log(func1.mock)
43+
/*
44+
{
45+
calls: [ [ 123 ], [ 123 ], [ 123 ] ],
46+
instances: [ undefined, undefined, undefined ],
47+
invocationCallOrder: [ 1, 2, 3 ],
48+
results: [
49+
{ type: 'return', value: 456 },
50+
{ type: 'return', value: 789 },
51+
{ type: 'return', value: undefined }
52+
]
53+
}
54+
*/
55+
})
56+
57+
test('测试 createObject', () => {
58+
const func = jest.fn()
59+
createObject(func)
60+
console.log(func.mock)
61+
/*
62+
{
63+
calls: [ [] ],
64+
instances: [ mockConstructor {} ],
65+
invocationCallOrder: [ 1 ],
66+
results: [
67+
{ type: 'return', value: undefined }
68+
]
69+
}
70+
*/
71+
})
72+
73+
// jest 模拟 axios 请求
74+
jest.mock('axios')
75+
test('测试 axios getData', async () => {
76+
// 模拟函数的返回，getData 不会真正发起 axios 请求
77+
axios.get.mockResolvedValueOnce({ data: 'hello' })
78+
axios.get.mockResolvedValueOnce({ data: 'world' })
79+
// axios.get.mockResolvedValue({ data: 'hello' })
80+
await getData().then((data) => {
81+
expect(data).toBe('hello')
82+
})
83+
await getData().then((data) => {
84+
expect(data).toBe('world')
85+
})
86+
})

‎13-自动化测试&mock数据/jest-test/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,5 @@
22

33
Jest是 Facebook 的一套开源的 JavaScript 测试框架
44
它自动集成了断言、JsDom、覆盖率报告等开发者所需要的所有测试工具，是一款几乎零配置的测试框架
5+
6+
![](./pic/01.png)

‎13-自动化测试&mock数据/jest-test/pic/01.png‎

92.3 KB
Loading

0 commit comments

Comments
 (0)