文章目录

一、Jest 前端自动化测试框架基础入门7.异步代码的测试方法8.Jest 中的钩子函数9.钩子函数的作用域

学习内容来源：Jest入门到TDD/BDD双实战_前端要学的测试课

相对原教程，我在学习开始时（2023.08）采用的是当前最新版本：

具体配置、操作和内容会有差异，“坑”也会有所不同。。。

一、Jest 前端自动化测试框架基础入门

一、Jest 前端自动化测试框架基础入门（一）

---

一、Jest 前端自动化测试框架基础入门（二）

7.异步代码的测试方法

安装 axios

npm i axios@0.19.0 -S

新建 fetchData.js:

import axios from 'axios'

export const fetchData = (fn) => {

axios.get('http://www.dell-lee.com/react/api/demo.json').then(res => fn(res.data))

}

新建单元测试文件 fetchData.test.js:

import fetchData from './fetchData'

// 回调类型异步函数的测试

test('fetchData 返回结果为 { success: true }', (done) => {

fetchData((data) => {

expect(data).toEqual({

success: true

})

// 只有当 done 函数被执行到才认为是测试用例执行结束

done();

})

})

不使用 done 的话，测试用例执行到 fetchData 之后直接就返回 pass

还有一种情况，将 Promise 对象直接返回出来：修改 fetchData.js:

import axios from 'axios'

export const fetchData = () => {

return axios.get('http://www.dell-lee.com/react/api/demo.json')

}

相应修改单元测试文件 fetchData.test.js:

import fetchData from './fetchData'

test('fetchData 返回结果为 Promise: { success: true }', () => {

return fetchData().then((res) => {

expect(res.data).toEqual({

success: true

})

})

})

若是想要单独测试 404，可以修改为如下

import fetchData from './fetchData'

test('fetchData 返回结果为 404', () => {

expect.assertions(1) // 下面的 expect 至少执行一个

return fetchData().catch((e) => {

expect(e.toString().indexOf('404') > -1).toBe(true)

})

})

若是不使用 expect.assertions ，当测试 接口访问成功，没走 catch 时，相当于啥也没有执行，也会通过，加上后若是接口访问成功会报错：Expected one assertion to be called but received zero assertion calls.

还有可以使用 expect 自带的函数识别结果：

test('fetchData 返回结果为 Promise: { success: true }', () => {

return expect(fetchData()).resolves.toMatchObject({

data: {

success: true

}

})

})

test('fetchData 返回结果为 404', () => {

return expect(fetchData()).rejects.toThrow()

})

除了使用 return 还可以使用 async…await 的语法：

test('fetchData 返回结果为 Promise: { success: true }', async () => {

await expect(fetchData()).resolves.toMatchObject({

data: {

success: true

}

})

})

test('fetchData 返回结果为 404', async () => {

await expect(fetchData()).rejects.toThrow()

})

还可以使用 async…await 先拿到响应结果，再判断：

test('fetchData 返回结果为 Promise: { success: true }', async () => {

const res = await fetchData()

expect(res.data).toEqual({

success: true

})

})

test('fetchData 返回结果为 404', async () => {

expect.assertions(1) // 下面的 expect 至少执行一个

try {

await fetchData()

} catch (e) {

expect(e.toString()).toEqual('Error: Request failed with status code 404.')

}

})

8.Jest 中的钩子函数

Jest 中的钩子函数指的是在 Jest 执行过程中到某一特定时刻被自动调用的函数，类似 Vue/React 中的生命周期函数

新建 Counter.js

export default class Counter {

constructor() {

this.number = 0

}

addOne() {

this.number += 1

}

minusOne() {

this.number -= 1

}

}

新建 Counter.test.js

import Counter from "./Counter";

describe('测试 Counter', () => {

const counter = new Counter();

test('测试 addOne 方法', () => {

counter.addOne()

expect(counter.number).toBe(1)

})

test('测试 minusOne 方法', () => {

counter.minusOne()

expect(counter.number).toBe(0)

})

})

运行测试用例，直接通过，但是两个测试用例共用了一个实例 counter，相互之间有影响，这显然是不可以的，可以引入 Jest 的 钩子函数来做预处理

修改 Counter.test.js

import Counter from "./Counter";

describe('测试 Counter', () => {

let counter = null

beforeAll(() => {

console.log('beforeAll')

})

beforeEach(() => {

console.log('beforeEach')

counter = new Counter();

})

afterEach(() => {

console.log('afterEach')

// counter = null

})

afterAll(() => {

console.log('afterAll')

})

test('测试 addOne 方法', () => {

console.log('测试 addOne ')

counter.addOne()

expect(counter.number).toBe(1)

})

test('测试 minusOne 方法', () => {

console.log('测试 minusOne ')

counter.minusOne()

expect(counter.number).toBe(-1)

})

})

这样就不会相互之间产生影响了

编辑 Counter.js 新增两个方法

export default class Counter {

constructor() {

this.number = 0

}

addOne() {

this.number += 1

}

addTwo() {

this.number += 2

}

minusOne() {

this.number -= 1

}

minusTwo() {

this.number -= 2

}

}

这时候测试文件怎么写呢？很显然功能有分类，可以使用 describe

编辑 Counter.test.js

import Counter from "./Counter";

describe('测试 Counter', () => {

let counter = null

beforeAll(() => {

console.log('beforeAll')

})

beforeEach(() => {

console.log('beforeEach')

counter = new Counter();

})

afterEach(() => {

console.log('afterEach')

// counter = null

})

afterAll(() => {

console.log('afterAll')

})

describe('测试“增加”相关的方法', () => {

test('测试 addOne 方法', () => {

console.log('测试 addOne ')

counter.addOne()

expect(counter.number).toBe(1)

})

test('测试 addTwo 方法', () => {

console.log('测试 addTwo ')

counter.addTwo()

expect(counter.number).toBe(2)

})

})

describe('测试“减少”相关的方法', () => {

test('测试 minusOne 方法', () => {

console.log('测试 minusOne ')

counter.minusOne()

expect(counter.number).toBe(-1)

})

test('测试 minusTwo 方法', () => {

console.log('测试 minusTwo ')

counter.minusTwo()

expect(counter.number).toBe(-2)

})

})

})

测试日志如下：

测试 Counter

测试“增加”相关的方法

√ 测试 addOne 方法 (6ms)

√ 测试 addTwo 方法 (4ms)

测试“减少”相关的方法

√ 测试 minusOne 方法 (4ms)

√ 测试 minusTwo 方法 (4ms)

console.log Counter.test.js:8

beforeAll

console.log Counter.test.js:12

beforeEach

console.log Counter.test.js:27

测试 addOne

console.log Counter.test.js:17

afterEach

console.log Counter.test.js:12

beforeEach

console.log Counter.test.js:32

测试 addTwo

console.log Counter.test.js:17

afterEach

console.log Counter.test.js:12

beforeEach

console.log Counter.test.js:41

测试 minusOne

console.log Counter.test.js:17

afterEach

console.log Counter.test.js:12

beforeEach

console.log Counter.test.js:46

测试 minusTwo

console.log Counter.test.js:17

afterEach

console.log Counter.test.js:22

afterAll

Test Suites: 1 passed, 1 total

Tests: 4 passed, 4 total

Snapshots: 0 total

Time: 4.411s

9.钩子函数的作用域

每一个 describe 都可以有自己的 beforeAll、afterAll、beforeEach、afterEach，执行顺序是从外往内。

外部的钩子函数可以对当前 describe 所有的测试用例起作用，而内部的只对内部的测试用例起作用，这就是钩子函数的作用域。

可以自行编写尝试，这里就不再赘述了。

还有一个单元测试小技巧，test 使用 only 修饰符可以让单元测试只运行这一个测试用例：

test.only('', () => { })

注意，代码执行顺序中，最先执行的是不包含在任何测试用例和钩子函数中的语句（直接暴露在各个 describe 内部最外层的语句），且只执行一次，后续才是测试用例和钩子函数的执行。

本文仅作记录， 实战要点待后续专文总结，敬请期待。。。