前端单元测试之Jest初体验


字数:853 阅读时长:3分钟 阅读:85

Jest 是一个令人愉快的 JavaScript 测试框架,专注于简洁明快。Jest 拥有良好的文档,只需很少的配置,并能根据你的需求进行扩展。它能确保任何 JavaScript 代码的正确性。它为你提供了易于理解、熟悉且功能丰富的 API 来编写测试用例,并快速地反馈结果。

单元测试 Jest

一、jest优势

  1. 零配置: Jest 的目标是在大部分 JavaScript 项目上实现开箱即用, 无需配置。
  2. 快照: 能够轻松追踪大型对象的测试。 快照可以与测试代码放在一起,也可以集成进代码行内。
  3. 隔离: 测试程序拥有自己独立的进程 以最大限度地提高性能。
  4. 优秀的 api:itexpect - Jest 将整个工具包放在同一个 地方。好书写、好维护、非常方便。

二、安装

  • 全局安装:
1
2
3
4
5
npm i -g jest
# or
cnpm i -g jest
# or
yarn global add jest
  • 项目局部安装:
1
2
3
4
5
npm i -D jest
# or
cnpm i -D jest
# or
yarn add --dev jest

三、配置使用

  1. 初始化项目,生成 package.json 文件和 jest 自定义配置文件
1
2
3
4
5
# 初始化,生成 package.json 文件
npm init -y

# 创建一个 jest 基础配置文件
jest --init
  1. 配置 scripts 脚本命令。
1
2
3
4
5
6
7
{
"scripts": {
"test": "jest",
"test:config": "jest test_dir --notify --config=config.json ",
"test:output": "jest test_dir --outputFile=test.report.json --json"
}
}

命令解释:

1
2
3
4
5
6
7
8
# 全局搜索 test.js 后缀文件执行单元测试
npm run test

# 使用 config.json 自定义配置文件进行单元测试
npm run test:config

# 将测试结果输出保存到 json 文件
npm run test:output

四、example

  1. 创建一个 demo.js 文件,编写功能函数并 exports 导出。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// ./demo.js

function sum(a, b) {
return a + b;
}

function sort(arr=[]) {
return arr.sort()
}

module.exports = {
sum,
sort,
}
  1. 创建一个 __tests__ 文件夹,并生成 demo.test.js 单元测试文件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// ./__tests__/demo.test.js

const { sum, sort } = require('../demo.js')

test('测试sum方法:10 + 20 = 30', () => {
expect(sum(10, 10)).toBe(30);
})

describe('测试 sort 方法功能', ()=>{
it('正常测试', ()=>{
const data = sort([1,3,5,2,4]);
expect(data).toEqual([1,2,3,4,5]);
})
it('不传值', ()=>{
const data = sort();
expect(data).toEqual([]);
})
})
  1. 使用 npm test 执行单元测试。
1
npm test
  1. 输出
1
2
3
4
5
6
7
8
9
10
11
 PASS  ../demo.test.js
√ 测试sum方法:10 + 20 = 30 (3 ms)
测试 sort 方法功能
√ 正常测试 (1 ms)
√ 不传值 (1 ms)

Test Suites: 1 passed, 1 total
Tests: 3 passed, 3 total
Snapshots: 0 total
Time: 0.976 s, estimated 2 s
Ran all test suites matching /.\\demo.test.js/i.
  1. sumsort 方法单元测试通过。

五、jest总结

  1. 当使用 jest 未指定测试的目录或具体文件时,会默认查找 __tests__ 文件夹下的 js|ts 文件和以 test.js 为后缀的文件。
  2. 建议所有的单元测试文件集中存放到单独的 __tests__ 目录下,与业务功能代码隔离。
  3. 推荐使用以功能方法名 + .test.js 的形式来命名对应的测试文件,例如:一个求和功能方法所在的文件为 sum.js,对应的单元测试文件就是 sum.test.js
  4. 常用的判断类型:toBe (值类型)、toEqual (引用类型)、toBeNulltoBeDefinedtoBeTruthy (true)、toBeFalsy (false)、toBeCloseTo (约等于)、toMatch (匹配包含)、toThrownot 修饰符( not.toBe )。
  5. describe 搭配 it 相当于形成了一组测试,适用于一个功能方法对应了多个测试用例。

参考文档:

  1. https://www.jestjs.cn/docs/getting-started

欢迎访问:天问博客

本文作者: Tiven
发布时间: 2022-04-19
最后更新: 2022-04-19
本文标题: 前端单元测试之Jest初体验
本文链接: https://www.tiven.cn/p/276a8a53/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^