一、介绍
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。