vitest-前端单元测试

简介
Vitest 是一个轻量级、快速且功能强大的测试框架,它基于 Vite 提供了一种极速的测试体验。Vitest 尤其适合用于 Vite 项目,但同样可以与其他前端项目(如使用 webpack 构建的项目)集成使用。

安装

  1. npm I vitest -D

  2. 为了执行测试,请将以下部分添加到你的 package.json 文件中:
    在这里插入图片描述

  3. 通常会在src目录下常见一个tests目录来存放编写的测试样例,一般情况下,执行测试的文件名中必须包含 “.test.” 或 “.spec.” (当我们执行测试时,vitest会自动获取到".test." 或 ".spec."后缀名的文件)如图:
    在这里插入图片描述

样例
简单说明一下测试样例中出现的vitestAPI:
describe:
• 作用:将一组相关的测试用例组合在一起,并给这组测试起一个名字。
• 用途:用于组织测试代码,使得测试结构更清晰。
it 或 test:
• 作用:定义一个具体的测试用例。
• 用途:编写实际的测试逻辑,并指定一个描述性的名字。
expect:
• 作用:用于编写断言,即验证某个值或表达式是否满足预期。
• 用途:在测试用例中,使用 expect 函数来验证实际结果与预期结果是否一致。
beforeEach:
• 作用:在每个 it 或 test 块之前运行指定的代码。(it是test的简写)
• 用途:通常用于设置测试环境或初始化测试中所需的变量和状态。

1、 普通函数
在这里插入图片描述
描述:在测试样例中我们给函数传递了a =1,b =1,验证结果是否等2
测试:npm run test
在这里插入图片描述
结果:测试通过,符合预期

2、 类
在这里插入图片描述
描述:在测试样例中实例化了一个MyClass并传入参数value = 1,调用increment函数,最后验证myClassInstance的结果是否等于2
测试:npm run test
在这里插入图片描述
结果:测试通过,符合预期

3、 vue3组合式函数
在这里插入图片描述
描述:useCounter内部的响应式变量默认值为零。
定义了两个测试用例,一个调用increment函数,一个不调用,并且两个测试用例都验证count变量的结果等于1(模拟一个预期结果错误的demo)
测试:npm run test
在这里插入图片描述
测试结果:测试样例‘模拟错误结果’不符合预期。

4、 异步回调Promise
在这里插入图片描述
描述:定义了两个测试用例,分别传入10和20.
AsyncFunction函数中判断如果传入的value === 10,reject(Error(错误)
AsyncFunction函数中判断如果传入的value === 10,resolve(value * 2)
测试:npm run test
在这里插入图片描述
测试结果:模拟reject的测试样例不符合预期,测试未通过

5、 函数中有使用pinia或者vuex全局状态管理
在这里插入图片描述
描述:这个测试样例最后验证了store的count是否符合预期,代码结构简单不细说。在实际开发过程中我们的代码要比以上样例复杂的多,编写测试用例也会随之复杂,建议编写源代码时,尽量多函数编写然后集成一个完成模块功能,利于测试和后期维护。
测试:npm run test
在这里插入图片描述
测试结果:符合预期,测试通过

6、 其他vitestAPI
Vitest提供的API非常丰富,以上测试样例中所使用只是小部分,而且比较简单。
比如test的第三个参数是用来测试测试用例是否超时的,拿异步回调用例举个例子
在这里插入图片描述
Timeouts 的默认值为 5000 ,单位毫秒
根据自身需求使用对应API。Test API 索引 | Vitest(https://cn.vitest.dev/api/)
比如在某些情况下,可能会需要在不同的环境下多次运行测试,而且某些测试可能是特定于环境的。我们这时候可以通过使用 test.skipIf 来跳过测试,而不是用 if 来封装测试代码。
在这里插入图片描述
比如想跳过运行某些测试,但又不想删代码,可以使用 test.skip 来跳过这些测试。
在这里插入图片描述

测试筛选
正常启动测试是对所有spec和test文件执行测试。
Vitest 支持通过文件名模式来筛选要运行的测试文件,这在大型项目中特别有用,因为它可以只运行与特定功能或模块相关的测试。
1、 按文件名筛选测试文件 -执行命令:vitest myClass
在这里插入图片描述
2、 按测试名称筛选测试案例
如想要基于测试案例的全名来筛选测试,而不是基于文件名,可以使用 -t
a) vitest -t “vue-test 2”
在这里插入图片描述
Vitest检索所有文件,并在counter.spec.ts文件中找到了对应的测试用例
b) 只想运行包含 " vue-test" 的所有测试案例,不论它们的确切名称是什么,可以这样做:vitest -t “vue-test”
在这里插入图片描述
Vitest在counter.spec.ts中找到了包含‘vue-test’的测试用例
关于更多筛选功能详情测试筛选 | 指南 | Vitest

配置
可以直接在vite.config.ts中直接对vitest进行配置,也可以新建一vitest.config.ts文件单独对vitest进行配置,如果使用vitest.config.ts单独对vitest进行配置的话,要注意vitest.config.ts会覆盖vite.config.ts中的配置。这是因为 Vitest 在启动时会首先查找专门的配置文件(如 vitest.config.ts),然后再查看 vite.config.ts 中是否有相关的 Vitest 配置。如果两者都有配置,那么 vitest.config.ts 中的配置会优先被使用。
详见:管理 Vitest 配置文件 | Vitest 和 配置索引 | Vitest

通过通义灵码生成单元测试
在这里插入图片描述
默认按照jest测试框架生成的代码。让他按照vitest重新生成
在这里插入图片描述

总结
Vitest提供的功能还有很多,比如报告器、测试覆盖率、测试快照等,以上只提到一小部分,使用vitest达到提升代码质量,提高调试效率,提高代码可维护率的水平,还是需要一定的学习成本的。本文档编写应该只能让读者对vitest有个基本的认识,由于时间问题对vitest的了解的也不多,如果文档中出现错误请给予纠正。

  • 5
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值