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。

Jest学习文档
Vue Test Utils

おすすめ

転載: blog.csdn.net/Dreamy_LIN/article/details/122522339