# Jest 前端自动化测试基础 (一)基本使用
# 安装
首先初始化一个 JS 项目
yarn init -y
使用 yarn 安装 Jest︰
yarn add -D jest
# 基本使用
在项目下创建demo.js和demo.test.js两个文件，以下的函数及其测试都会写在对应的文件中，不再提及
更新 package.json 的 script 字段
"scripts": {
"test": "jest"
}
2
3
想要测试，首先要编写需要测试的代码，其次编写对应的测试用例，最后执行测试
// 待测代码
function sum(num1, num2) {
return num1 + num2
}
module.exports = { sum }
2
3
4
5
6
// 测试用例
const { sum } = require('./demo')
test('测试sum(1, 2)的返回值为3', () => {
expect(sum(1, 2)).toBe(3)
})
2
3
4
5
6
命令行执行yarn test后，将会输出
PASS 1.basic/demo.test.js
✓ 测试sum(1, 2)的返回值为3 (3 ms)
2
# 配置 babel
上一步中，我们使用module.exports与require语法进行导入导出，如果你的项目是 nodejs 项目，自然可以直接使用这种语法；但如果是前端项目，想要使用export与import语法，就需要配置 babel
首先安装依赖
yarn add -D babel-jest @babel/core @babel/preset-env
在根目录下增加.babelrc.js
module.exports = {
presets: [['@babel/preset-env', { targets: { node: 'current' } }]],
}
2
3
将之前的代码更改为
// 待测代码
export function sum(num1, num2) {
return num1 + num2
}
2
3
4
// 测试用例
import { sum } from './demo'
test('测试sum(1, 2)的返回值为3', () => {
expect(sum(1, 2)).toBe(3)
})
2
3
4
5
6
执行yarn test即可正常测试
# 使用匹配器
在基本使用中，我们使用expect(sum(1, 2)).toBe(3)这样的语法来测试sum函数的返回值是否为 3，这其中expect函数返回一个“期望”的对象，而toBe函数就是一个匹配器
# 普通匹配器
除了上面用到的toBe用于判断两个值是否相等，判断对象、数组的值是否相同时需要用到toEqual
test('测试对象是否相等', () => {
expect({ a: 1 }).toBe({ a: 1 }) // 不通过
expect({ a: 1 }).toEqual({ a: 1 }) // 通过
})
2
3
4
还可以使用.not测试相反的匹配
test('测试数值是否相等', () => {
expect(1).toBe(2) // 不通过
expect(1).not.toBe(2) // 通过
})
2
3
4
# 数字
数值之间用于比较大小的匹配器有以下几种
toBeGreaterThan(3) // 大于
toBeGreaterThanOrEqual(3.5) // 大于等于
toBeLessThan(5) // 小于
toBeLessThanOrEqual(4.5) // 小于等于
2
3
4
需要注意的是，对于浮点数相等的比较，需要使用toBeCloseTo而不是toEqual
test('浮点数字相加', () => {
const value = 0.1 + 0.2
// expect(value).toBe(0.3) // 不通过，因为浮点数有舍入误差 0.30000000000000004
expect(value).toBeCloseTo(0.3) // 通过
})
2
3
4
5
# 字符串
使用toMatch匹配指定的字符串，也可以使用正则表达式
test('匹配指定字符串', () => {
expect('mife').toMatch('fe')
})
test('匹配正则表达式', () => {
expect('i18n').toMatch(/\d/)
})
2
3
4
5
6
7
# 数组或可迭代对象
可以通过toContain来检查一个数组或可迭代对象是否包含某个特定项
const list = ['a', 'b', 'c', 'e', 'e', 'f']
test('测试是否存在字符 e', () => {
expect(list).toContain('e')
expect(new Set(list)).toContain('e')
})
2
3
4
5
6
# 真实性
这类匹配器有以下几个，在需要时选用最合适的即可
toBeNull只匹配nulltoBeUndefined只匹配undefinedtoBeDefined与toBeUndefined相反toBeTruthy匹配任何使if语句为真的值toBeFalsy匹配任何使if语句为假的值
# 异常
如果代码需要在特定条件下抛出异常，进行这部分测试时可以使用toThrow
function func() {
throw new Error('something went wrong here!')
}
test('测试是否抛出异常', () => {
expect(func).toThrow()
expect(func).toThrow(Error)
// 也可以指定错误信息
expect(func).toThrow('something went wrong here!')
expect(func).toThrow(/wrong/)
})
2
3
4
5
6
7
8
9
10
11
12
# 其他
在以上的例子中，每次编写完测试用例之后都需要重新执行测试命令，如果你在使用 vscode，可以安装 jest 插件 orta.vscode-jest
这样在你编写完测试用例后，jest 会自动的执行并在输出面板中给你反馈
