Jest 组件库单元测试【基础语法篇】

一、介绍

Jest 是 Facebook 出品的一个测试框架，相对其他测试框架，其一大特点就是就是内置了常用的测试工具，比如自带断言、测试覆盖率工具，实现了开箱即用。

此外， Jest 的测试用例是并行执行的，而且只执行发生改变的文件所对应的测试，提升了测试速度。

二、简单尝试 Jest

启动一个项目：

安装 Jest

全局：npm install -g jest 或局部： npm install -D jest

在 package.json 中指定 test 脚本：

Jest 的测试脚本名形如*.test.js，不论 Jest 是全局运行还是通过 npm test 运行，它都会执行当前目录下所有的*.test.js 或 *.spec.js 文件、完成测试

基本使用：

用例表示：
test(‘用例描述’, () => { 回调函数表示成功和失败的输出 }) 函数来描述一个测试用例

测试成功：

测试失败：其中 toBe(‘Hello world’) 便是一句断言，若测试失败，会标识出失败的断言位置

用例的预处理或后处理（钩子函数、生命周期）

对测试文件中所有的用例进行统一的预处理，可以使用 beforeAll() 函数；

而如果想在每个用例开始前进行都预处理，则可使用 beforeEach() 函数。

后处理，也有对应的 afterAll() 和 afterEach() 函数。

代码：

结果：



测试异步代码：
对于异步回调，向其传入并执行 done 函数， Jest 会等 done 回调执行结束后，结束测试


对于 Promise 控制的异步代码，可以直接在 then 回调中进行断言，只要保证在用例中返回该 Promise 对象即可


测试覆盖率
Jest 内置了测试覆盖率工具 istanbul，要开启，可以直接在命令中添加 --coverage 参数，或者在 package.json 文件进行更详细的配置。

运行 istanbul 除了会在终端展示测试覆盖率情况，还会在项目下生产一个 coverage 目录，内附一个测试覆盖率的报告，让我们可以清晰看到分支的代码的测试情况

运行 jest --coverage 可看到产生的报告里展示了代码的覆盖率和未测试的行数：

模拟函数

使用 mock 函数 jest.fn() 生成一个 Mock 函数

所有的 mock 函数都有这个特殊的 .mock 属性，它保存了关于此函数如何被调用、调用时的返回值的信息

为了测试函数，我们可以使用一个 mock 函数，然后检查 mock 函数的状态来确保回调函数如期调用。

通用建议：

适合引入测试的场景：

• 需要长期维护的项目。它们需要测试来保障代码可维护性、功能的稳定性
• 较为稳定的项目、或项目中较为稳定的部分。给它们写测试用例，维护成本低
• 被多次复用的部分，比如一些通用组件和库函数。因为多处复用，更要保障质量

三、Jest 在 Vue 中的使用

Vue 中原有的 Jest

it是的别名test。所以它们是完全一样的

结果：

Vue Test Utils 使我们的测试具有 “Vue 意识”，让我们能够轻松地在 Jest 测试中与 Vue 组件进行交互。没有它，我们只能单纯对 JavaScript 代码编写测试，而不能针对 Vue 编写测试。

开发模式

TDD: 测试驱动开发，英文为Testing Driven Development，强调的是一种开发方式，以测试来驱动整个项目，即先根据接口完成测试编写，然后在完成功能是要不断通过测试，最终目的是通过所有测试
BDD: 行为驱动测试，英文为Behavior Driven Development，强调的是写测试的风格，即测试要写的像自然语言，让项目的各个成员甚至产品都能看懂测试，甚至编写测试

TDD和BDD有各自的使用场景，BDD一般偏向于系统功能和业务逻辑的自动化测试设计；而TDD在快速开发并测试功能模块的过程中则更加高效，以快速完成开发为目的。

两者不是一个层级的东西。 BDD 包含 TDD。

感兴趣的朋友可以看下，我以自己项目为案例写的 Vue Test Utils 【实战篇】

Jest学习文档
Vue Test Utils