什么是 Vitest?
- 由 Vite ⚡️ 提供支持的极速单元测试框架,开发者与维护者为 Vue 核心团队成员之一 antfu。
- 与 Vite 的配置通用,watch 模式下极快的反应(相当于测试中 HMR)。(vitest run 支持单次测试 一般使用在 CI 环境中)
- 可以对 Vue/React 组件进行测试。
- 开箱即用 Typescript/JSX/ESM(配过 jest 的就知道兼容 ESM 麻不麻烦了)
- 与 Jest 几乎相同的 API,同时也有 Jest 的快照功能(这个非常好用!)
- 模拟 DOM
- 生成测试覆盖率
- 等等……
即时的 watch 模式 为什么速度提升是要远远快于 jest 的?
- vitest 默认以观察模式(watch 模式)启动
- 对比而言,这个算是 vitest 的一个比较大的优势,在 watch 模式下进行测试的热更新,速度提升是要远远快于 jest 的,至于 vitest 的 watch 模式为什么这么快,可以参考 antfu 的一条 twitter 内容(https://twitter.com/antfu7/status/1468233216939245579):
创建vitest demo
1 | pnpm create vite |
vite.config.ts 配置test 选项报错问题
在顶部添加 /// <reference types='vitest' />
或者使用 import { defineConfig } from 'vitest/config'
1 | /// <reference types='vitest' /> |
/// reference 的用途?
主要是为了 ide 能够识别其他文件里的变量
编辑某个js文件时,要想这个js文件出现其他js成员的ide提示,可以再js文件开头使用3个斜杠注释和reference
指令的path
或 type
指向此js文件路径,这样在编写这个js文件时,ide就会自动出现path指向的js文件中的成员。
- 注意:
reference
注释需要放在js文件开头(并不需要一定是第一行,前面可以有空白行),但是前面只能是空白行,不能有其他js代码。注释需要为3个斜杠///
,可以使用注释/// <reference/>
导入多个会引用到的js文件。
1 | ///<reference path="jquery1.4.2.js"> |
1 | /// <reference types="vitest" /> |
- 提醒:js文件三斜杠注释
///reference path
导入的文件是给ide用的,你的html页面注意一定也要导入对应的js文件,要不会报错。
与/// <reference path="..." />
指令相似,这个指令是用来声明 依赖的; 一个/// <reference types="..." />
指令则声明了对某个包的依赖。
对这些包的名字的解析与在 import语句里对模块名的解析类似。 可以简单地把三斜线类型引用指令当做 import声明的包。
例如,把 /// <reference types="node" />
引入到声明文件,表明这个文件使用了 @types/node/index.d.ts
里面声明的名字; 并且,这个包需要在编译阶段与声明文件一起被包含进来。
仅当在你需要写一个d.ts
文件时才使用这个指令。
TypeScript 三斜线指令
三斜线指令是包含单个XML标签的单行注释。 注释的内容会做为编译器指令使用。
三斜线指令仅可放在包含它的文件的最顶端。 一个三斜线指令的前面只能出现单行或多行注释,这包括其它的三斜线指令。 如果它们出现在一个语句或声明之后,那么它们会被当做普通的单行注释,并且不具有特殊的涵义。
1 | /// <reference path="..." /> |
配置全局 vitest
配置全局 vitest
就可以在测试脚本 直接使用 vitest
相关函数
- 在
vite.config.ts
添加globals: true
1 | export default defineConfig({ |
在 tsconfig.json
添加 vitest/globals
编译器就不报错了
1 | "types": [ |
document is not defined?
在node 测试 过程中缺少 dom 相关APi , 安装 jsdom
1 | pnpm install jsdom -D |
在 vite.config.ts 里 test 选项添加environment: 'jsdom'
与它类似的是happy-dom
Happy DOM 是 jsdom 的替代品,用于支持 Web Components 的 SSR(Web 组件的服务器端渲染),旨在支持浏览器的常用
怎么支持 tsx 组件?
vite 是不知道要如何解析 tsx 组件
- vitest 遇到 .jsx/.tsx 文件 默认当作 ssr 环境(
getTransformMode
) - 所以我们要告诉 vitest 环境我们是在 web 环境
所要在test 选项 添加
1 | test={ |
支持测试筛选
可以使用 CLI 按名称筛选测试文件:
1 | vitest basic |
将只执行包含 basic 的测试文件,例如:
1 | basic.test.ts |
vitest run –coverage
1 | pnpm add @vitest/coverage-c8 -D |
也可以在 testconfig 配置 provider provider 为 c8
1 | // vite.config.ts |
当启动 Vitest 进程时,vitest会提示您自动安装相应的支持包。
Coverage c8 相关指标、 c8 使用原生 V8 覆盖
%stmts是语句覆盖率(statement coverage):是不是每个语句都执行了?
%Branch分支覆盖率(branch coverage):是不是每个if代码块都执行了?
%Funcs函数覆盖率(function coverage):是不是每个函数都调用了?
%Lines行覆盖率(line coverage):是不是每一行都执行了?
test相关资函数
test.skip
如果你想跳过运行某些测试,但由于一些原因不想删除代码,你可以使用test.skip
来避免运行它们。1
2
3
4
5
6import { assert, test } from 'vitest'
test.skip('skipped test', () => {
// 跳过测试,没有错误
assert.equal(Math.sqrt(4), 3)
})test.todo
使用 test.todo 来存根测试,以便稍后实现。 测试报告中将显示一个条目,以便告知你还有多少测试未实现。1
2
3import { assert, test } from 'vitest'
test.todo('test.todo')
vitest –ui
Vitest 由 Vite 提供能力,在运行测试时有一个开发服务器。这允许 Vitest 提供一个漂亮的 UI 界面来查看并与测试交互
可以在json 添加 "test:ui": "vitest --ui"
命令
1 | "test:ui": "vitest --ui", |
前端单测,不要测 “实现细节”?
- 实现细节(Implementaion Details)就是:使用你代码的人不会用到、看到、知道的东西
- 那谁才是我们代码的用户呢?第一种就是跟页面交互的真实用户。第二种则是使用这些代码的开发者
- 如何在测试用例用到实现细节的代码,会影响到我们后续一重构,可能就会影响到测试用例
macros 概念 (sveltejs、SolidJS)
- 本文作者: Littleki
- 本文链接: https:/littleki.gitee.io/2022/08/23/分享会/如何使用vitest 测试组件/
- 版权声明: 本博客所有文章除特别声明外,均采用 MIT 许可协议。转载请注明出处!