前端单元测试之Jest初体验

本文主要是介绍前端单元测试之Jest初体验，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

单元测试 Jest

一、jest优势

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

二、安装

全局安装：

npm i -g jest
# or
cnpm i -g jest
# or
yarn global add jest

项目局部安装：

npm i -D jest
# or
cnpm i -D jest
# or
yarn add --dev jest

三、配置使用

初始化项目，生成 package.json 文件和 jest 自定义配置文件

# 初始化，生成 package.json 文件
npm init -y# 创建一个 jest 基础配置文件
jest --init

配置 scripts 脚本命令。

{"scripts": {"test": "jest","test:config": "jest test_dir --notify --config=config.json ","test:output": "jest test_dir --outputFile=test.report.json --json"}
}

命令解释：

# 全局搜索 test.js 后缀文件执行单元测试
npm run test# 使用 config.json 自定义配置文件进行单元测试
npm run test:config# 将测试结果输出保存到 json 文件
npm run test:output

四、example

创建一个 demo.js 文件，编写功能函数并 exports 导出。

// ./demo.jsfunction sum(a, b) {return a + b;
}function sort(arr=[]) {return arr.sort()
}module.exports = {sum,sort,
}

创建一个 __tests__ 文件夹，并生成 demo.test.js 单元测试文件。

// ./__tests__/demo.test.jsconst { 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([]);})
})

使用 npm test 执行单元测试。

npm test

输出

 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.

sum 和 sort 方法单元测试通过。

五、jest总结

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