对于一个完整的前端工程，单元测试是不可缺少的一部分。但我们之所以很少使用单元测试，是对单元测试的认知不够，所以接下来，我们了解一下什么是单元测试。
前端单元测试是什么？
检测目标是否符合标准而用专业的工具和方法验证，最终得到特定结果。
对于前端开发来讲，特定目标是指代码，工具就是我们需要用到的测试框架（库）、测试用例等。
常用工具
Mocha 和 Jest，在开发中，我推荐使用Jest，从下载量和stats量来看，Jest也远高于Mocha。参见：jest vs mocha
原理以及如何使用
test
第一步：yarn add --dev jest
第二步：添加命令
{
"scripts": {
"test": "jest"
}
}
第三步： 配置
module.exports = {
// 是否显示覆盖率报告
collectCoverage: true,
};
配置jest.config.js也可以使用 npx jest --init 命令帮我们初始化配置
通过 ts-jest 使用 TypeScript
yarn add ts-jest -D
添加配置 preset: "ts-jest"
module.exports = {
presets: [
["@babel/preset-env", { targets: { node: "current" } }],
"@babel/preset-typescript",
],
};
第四步：编写测试代码
创建ts文件
第五步：运行
yarn test
- %stmts是语句覆盖率：是不是每个语句都执行了
- %Branch分支覆盖率：是不是每个if代码块都执行了
- %Funcs函数覆盖率：是不是每个函数都调用了
- %Lines行覆盖率：是不是每一行都执行了
- Uncovered Line #s：没有执行的代码行
断言
“断言”通常用于判断在某些逻辑条件下会执行某种预期的结果，Jest框架内置了丰富的断言语句Expect。
测试值的时候我们通常会使用expect来断言值的内容，用下面代码段举例，有一个sumAdd函数会反回数字加一的值，我们测试的代码
describe("index.ts", () => {
test("test index", () => {
// toBe 匹配器有种类似于object.is或者===
expect(sumAdd(1)).toBe(2);
});
test("test index NaN", () => {
expect(sumAdd(NaN)).toBe(0);
});
});
在以上情况toBe是匹配器功能，匹配我们函数返回值和预期的值是否相等。像这样的匹配器官方提供很多，值得一提的匹配器是.toMatchInlineSnapshot，用来确保值与最近的快照匹配，用法例如以下代码段
describe("index.ts", () => {
test("test index", () => {
// toBe 匹配器有种类似于object.is或者===
expect(sumAdd(1)).toBe(2);
expect(sumAdd(1)).toMatchSnapshot();
});
test("test index NaN", () => {
expect(sumAdd(NaN)).toBe(0);
expect(sumAdd(NaN)).toMatchSnapshot();
});
});
参考源码位置：
生命周期勾子
jest提供了一些测试的生命周期API，可以辅助我们在每个case的开始结束做一些处理。列举4个主要的生命周期勾子：
- afterAll：当前文件中的所有测试执行完成后执行 fn，如果 fn 是promise，jest 会等待timeout 毫秒，默认 5000
- afterEach：每个 test 执行完后执行 fn，timeout 含义同上
- beforeAll：同 afterAll，不同之处在于在所有测试开始前执行
- beforeEach：同 afterEach，不同之处在于在每个测试开始前执行
参考源码位置：
模拟函数
使用模拟函数通过jest.fn()创建，如果没有函数定义会返回undefined，通过日志打印返回值如下：
假设我们要测试某循环函数的内部实现，这个函数为传入的数组中的每个元素调用一次回调函数，我们可以使用jest.fn()模拟回调函数，来测试循环函数的内部实现
所有的 mock 函数都有这个特殊的 .mock属性，它保存了关于此函数如何被调用、调用时的返回值的信息。Mock 有返回值，并且在测试期间也可以将测试值注入代码。
总结：以上是全文内容，简述关于Jest使用流程和方法，相信阅读之后您也可以尝试一下编写测试代码的快乐。
