前言
什么是 Jest
Jest 是用来创建、执行和构建测试用例的一个 JavaScript 测试
库。可以在任何项目中安装使用它，如 Vue/React/Angular/Node/TypeScript 等。
使用 Jest 的好处
目前前端测试在开发应用场景主要是 UI 组件库，但其实不止是组件库，日常项目开发也可以加入单元测试，保证项目的稳定。
它的好处有哪些呢？
速度快，使用简单和容易配置
通过编写测试，让代码出现 bug 的概率更小
有利于写出健壮性更好的代码，项目的可维护性增强
好的测试，就具有文档解释的作用
减少回归测试中的 bug
举个栗子
比如写一个加法和减法函数
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)为我们期望的测试函数，来实现这个函数：
function expect(result) { return { toBe(actual) { if (result !== actual) { throw new Error(`与预期结果不相等。实际结果：${actual}，期望结果：${result}`) } }, } } |
使用：
expect(add(1, 1)).toBe(2) expect(minus(2, 1)).toBe(1) expect(add(2, 2)).toBe(3) // Error: 与预期结果不相等。实际结果：3，期望结果：4 |
测试不通过我们就让它抛出错误
这样写的话实际有点混乱，因为一眼看下去不知道在测试啥，于是，我们多封装一个函数，代表我们正在做什么测试。
// 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) }) |
执行代码，输出
加法测试通过测试
减法测试通过测试
这就是我们动手的最简单的测试了，因为我们函数比较简单，所以你可能会觉得在做着啰嗦的工作。
从流程上看，一个简单的测试流程（输入 —— 预期输出 —— 验证结果）如下：
引入要测试的函数
传入测试函数执行结果
定义预期输出
检查函数是否返回了预期的输出结果
初始化环境
创建一个空文件夹进入初始化
| npm init -y |
安装 jest
| yarn add --dev jest |
在package.json配置脚本命令
{ "scripts": { "test": "jest" } } |
新建文件babel.config.js，安装依赖并配置
| yarn add --dev babel-jest @babel/core @babel/preset-env |
// 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
export const multiply = (a, b) => { return a * b } |
新建文件matcher.test.js
import { multiply } from './example' test('测试乘法', () => { expect(multiply(4, 2)).toBe(8) }) |
toBe 使用 Object.is 来测试精确相等。 如果想要检查对象的值，使用 toEqual 代替。
matcher.test.js
test('测试对象是否相等', () => { const data = { name: 'jacky' } data['age'] = 23 expect(data).toEqual({ name: 'jacky', age: 23 }) }) |
运行yarn test，可看到控制台显示两个测试通过；如不通过控制台也会提示哪个测试用例出错。
当运行该命令的时候，jest 会自动搜寻项目中有.test.js后缀的文件，并运行测试。
当然，也有其他匹配器
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) }) |
本文内容不用于商业目的，如涉及知识产权问题，请权利人联系博为峰小编(021-64471599-8017)，我们将立即处理
