0%

一文带你了解 Jest 单元测试

前端测试普及度虽然不算高,但对项目代码质量以及后期维护项目上却有很大的作用。本文会抛砖引玉的讲下 Jest 单元测试,因为很多 API 具体看官网就可以了。

什么是 Jest

Jest 是用来创建、执行和构建测试用例的一个 JavaScript 测试
库。可以在任何项目中安装使用它,如 Vue/React/Angular/Node/TypeScript 等。

使用 Jest 的好处

目前前端测试在开发应用场景主要是 UI 组件库,但其实不止是组件库,日常项目开发也可以加入单元测试,保证项目的稳定。

它的好处有哪些呢?

  • 速度快,使用简单和容易配置
  • 通过编写测试,让代码出现 bug 的概率更小
  • 有利于写出健壮性更好的代码,项目的可维护性增强
  • 好的测试,就具有文档解释的作用
  • 减少回归测试中的 bug

举个栗子

比如写一个加法和减法函数

1
2
3
4
5
6
7
function add(a, b) {
return a + b
}

function minus(a, b) {
return a - b
}

我们从最简单的函数开始入手讲起来,假设要对改函数进行测试,我们测试的到底是什么,即是他的功能,调用函数时传入两个参数,返回结果为他们相加的值。比如传入add(1, 1),我们期望结果是返回相加结果2
写成代码可以这样expect(add(1, 1)) === 2,再封装得语义化一点的话,expect(add(1, 1)).toBe(2)为我们期望的测试函数,来实现这个函数:

1
2
3
4
5
6
7
8
9
function expect(result) {
return {
toBe(actual) {
if (result !== actual) {
throw new Error(`与预期结果不相等。实际结果:${actual},期望结果:${result}`)
}
},
}
}

使用:

1
2
3
expect(add(1, 1)).toBe(2)
expect(minus(2, 1)).toBe(1)
expect(add(2, 2)).toBe(3) // Error: 与预期结果不相等。实际结果:3,期望结果:4

测试不通过我们就让它抛出错误

这样写的话实际有点混乱,因为一眼看下去不知道在测试啥,于是,我们多封装一个函数,代表我们正在做什么测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// desc 用来描述测试行为, fn则为我们执行测试的函数
function test(desc, fn) {
try {
fn()
console.log(`${desc}通过测试`)
} catch (e) {
console.log(`${desc}测试不通过 ${e}`)
}
}

test('加法测试', () => {
expect(add(1, 1)).toBe(2)
})

test('减法测试', () => {
expect(minus(2, 1)).toBe(1)
})

执行代码,输出

1
2
加法测试通过测试
减法测试通过测试

这就是我们动手的最简单的测试了,因为我们函数比较简单,所以你可能会觉得在做着啰嗦的工作。

从流程上看,一个简单的测试流程(输入 —— 预期输出 —— 验证结果)如下:

  1. 引入要测试的函数
  2. 传入测试函数执行结果
  3. 定义预期输出
  4. 检查函数是否返回了预期的输出结果

初始化环境

创建一个空文件夹进入初始化

1
npm init -y

安装 jest

1
yarn add --dev jest

package.json配置脚本命令

1
2
3
4
5
{
"scripts": {
"test": "jest"
}
}

新建文件babel.config.js,安装依赖并配置

1
yarn add --dev babel-jest @babel/core @babel/preset-env
1
2
3
4
5
6
7
8
9
10
11
12
13
// babel.config.js
module.exports = {
presets: [
[
'@babel/preset-env',
{
targets: {
node: 'current',
},
},
],
],
}

接下来我们每段介绍都会采取example.js里面写代码,再到*.test.js文件引入example.js的函数并测试。

匹配器 Matchers

使用 Matchers 让你可以用各种方式测试你的代码

跟我们上面写的代码一样,jest 提供了test,expect,toBe方法

example.js

1
2
3
export const multiply = (a, b) => {
return a * b
}

新建文件matcher.test.js

1
2
3
4
5
import { multiply } from './example'

test('测试乘法', () => {
expect(multiply(4, 2)).toBe(8)
})

toBe 使用 Object.is 来测试精确相等。 如果想要检查对象的值,使用 toEqual 代替。

matcher.test.js

1
2
3
4
5
test('测试对象是否相等', () => {
const data = { name: 'jacky' }
data['age'] = 23
expect(data).toEqual({ name: 'jacky', age: 23 })
})

运行yarn test,可看到控制台显示两个测试通过;如不通过控制台也会提示哪个测试用例出错。

当运行该命令的时候,jest 会自动搜寻项目中有.test.js后缀的文件,并运行测试。

当然,也有其他匹配器

1
2
3
4
5
6
7
8
9
10
11
12
13
test('匹配器', () => {
const n = null
const isTrue = true
const value = 3
expect(n).toBeNull() // 只匹配 null
expect(n).toBeDefined() // 只匹配 undefined
expect(n).not.toBeUndefined() // 与 toBeUndefined 相反
expect(isTrue).toBeTruthy() // 匹配任何 if 语句为真

expect(value).toBeGreaterThan(2)
expect(value).toBeLessThan(5)
expect(value).toBeLessThanOrEqual(3)
})

测试异步代码

example.js

1
2
3
4
5
import axios from 'axios'

export const fetchData = () => {
return axios.get('https://jsonplaceholder.typicode.com/todos/1')
}

async.test.js

1
2
3
4
5
6
7
8
9
10
11
12
import { fetchData } from './example'

test('测试 async await', async () => {
const data = await fetchData()
expect(data.data.id).toBe(1) // 请求api返回的id值是否为1
})

test('测试 Promise', () => {
return fetchData().then(data => {
expect(data.data.id).toBe(1)
})
})

mock 函数

如果我们有很多异步请求的函数需要测试,会使测试变得缓慢,那么上述用真实接口请求的方式就不太适合了;或者想要捕获对函数的调用,这时就需要 Mock,它可以做到:

  1. 捕获对函数的调用,以及 this 和调用顺序
  2. 它允许测试时配置返回值
  3. 改变函数的内部实现

mock.test.js

1
2
3
4
5
6
7
8
9
10
import axios from 'axios'
import { fetchData } from './example'
jest.mock('axios') // 自动模拟 axios 模块。

test('测试请求接口', async () => {
axios.get.mockResolvedValue({ data: 'hello' }) // 返回假数据 { data: 'hello' } 用于测试
await fetchData().then(data => {
expect(data).toEqual({ data: 'hello' })
})
})

可能你会想,这样测试有什么用,都是假数据,作为前端这边,我们只要确保函数被调用和正常返回结果就够了;当然这个例子是比较简单,涉及复杂接口测试的话还有其他 API 可用。其他更深入具体的接口请求测试是后端要做的。

example.js增加一个函数

1
2
3
4
// 执行该函数需要传入一个回调函数,然后回调函数传递一个参数并执行
export function runFn(fn) {
fn('函数执行了')
}

如果这是一个复杂的函数,我们并不想测试就让它执行,就可以用 mock 来测试

1
2
3
4
5
6
7
test('函数被调用了', () => {
const fn = jest.fn()
runFn(fn) // 调用函数

expect(fn).toHaveBeenCalled() // 期望fn被调用了
expect(fn).toHaveBeenLastCalledWith('函数执行了') // 函数fn被调用时的参数是否符合
})

此外,还可以自定义设置返回参数,测试被执行次数等等,具体查官方文档。

Snapshot

每当我们想要确保 UI(指 html css 等)或者配置文件不会改变时,可以使用快照测试。

这里只举例配置文件

example.test.js

1
2
3
4
5
6
export function getConfig() {
return {
port: 8080,
url: 'http://localhost:3000',
}
}

snapshot.test.js

1
2
3
4
5
import { getConfig } from './example'

test('测试配置文件有没有更改', () => {
expect(getConfig()).toMatchSnapshot()
})

运行npm run test,第一次运行,会发现文件所在位置生成一个文件夹__snapshots__,里面有个snapshot.test.js.snap文件,里面内容是:

1
2
3
4
5
6
7
8
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`测试配置文件有没有更改 1`] = `
Object {
"port": 8080,
"url": "http://localhost:3000",
}
`;

里面保存了我们配置信息,如果你不小心改了配置信息的话,在执行测试就会报错,因为与这个文件的内容不符合;这时你就知道了你改到不应该改的位置了
比如把端口好改成8081,再运行npm run test

但如果真的要改的话呢,那就按提示里面的信息做,更新快照,执行:

1
npm test -- -u

执行后就会在终端看到:

1
Snapshots:   1 updated, 1 total

这次再执行测试就不会报错了,就把配置信息更新了。

Timers Mocks

当要测试有定时器的函数时,比如过 5 秒执行什么任务,对于我们来说并不是很方便,要真正等待它经过一定时间执行,这是可以模拟定时器函数。

example.js

1
2
3
4
5
6
7
export function timerGame(callback) {
console.log('Ready....go!')
setTimeout(() => {
console.log("Time's up -- stop!")
callback && callback()
}, 3000)
}
1
2
3
4
5
6
7
8
9
10
11
import { timerGame } from './example'

jest.useFakeTimers()

test('测试一定时间后执行函数', () => {
const fn = jest.fn()
timerGame(fn)
jest.advanceTimersByTime(3000) // 把时间提前了三秒
expect(fn).toBeCalled() // 函数被调用了
expect(fn).toHaveBeenCalledTimes(1) // 函数被执行了1次
})

测试覆盖率

增加一个脚本命令,将测试覆盖率信息输出为报告

1
"coverage": "jest --coverage"

执行该命令

可以在终端看到生成了报告,上述例子的代码测试覆盖率是 100%,这是因为测试的函数比较简单,所以轻易 100%。

同时项目根目录也成功了一个文件夹coverage,里面的lcov-report目录里生成 HTML 文件,可以通过浏览器打开查看。

如下:

TDD 与 BDD

现在流行的单元测试风格主要有 TDD(测试驱动开发)和 BDD(行为驱动开发)两种。比较明显的区别是一个是先写测试用例再写代码,一个是先写代码再写测试用例。

TDD

TDD 的开发流程一般是先编写测试用例,再编写代码。

比如写一个 Todolist,我们一开始先想好它的功能和注意点,每一个功能都具备对应的测试用例,编写测试用例,没写代码之前肯定是通不过的;然后写完开始编写代码,使测试用例通过测试,再继续重复步骤,完成开发。这样写出来的代码质量和维护性也会更好。

所以 TDD 一般就是作为单元测试,即是单一组件功能上测试得较为完善,但几个组件加起来测试这种却不一定能测试完善。

单元测试应用比较多的是函数库,可对每个函数进行单独细致测试。

单元测试比较独立,但过于独立也会隐藏一些潜在问题无法测到,这个时候就有集成测试辅助了。

BDD

BDD 的开发流程一般是先编写代码,再写测试用例。

这个就比较符合我们以往的开发模式,不过 BDD 更关注的是整体的行为是否符合预期,一般结合集成测试,也就是说整体好多个组件整体业务测试这种。

集成测试重点关心的是结果,而不是代码,更适合业务开发。

结语

两种测试风格都有它自己的优缺点,这里只是举例一部分;整体简单理解下来,前端测试能让我们写出更好的代码,减少 bug 的产生;而且,在维护一些老项目方面,也是有优势,比如你在改动旧项目代码的时候,可能怕影响其他组件或功能但你无法知晓,但如果有测试,直接改完运行所有测试代码就知道有没有影响到其他的功能代码了;而如果老项目没有写单元/集成测试,为了更好的维护,你也可以加入测试代码。

如果要学习更多有关 Jest 测试的内容,当然是直接去 Jest 官网 看了,然后在实际开发运用中才会逐渐体会到它带来的好处。

本文代码地址

-------------本文结束感谢您的阅读-------------