vitest的使用

一麻袋小猫

已于 2025-02-27 14:39:04 修改

阅读量655

点赞数 20

CC 4.0 BY-SA版权

文章标签：前端

于 2025-02-27 14:38:29 首次发布

本文链接：https://blog.youkuaiyun.com/Zmongo/article/details/145903884

安装与使用

vitest 3.0.1 需要 Vite >=v5.0.0 和 Node >=v18.0.0
npm install -D vitest
package.json中配置
只要node大于18即可，但是使用的node版本要与engines中一致，否则会报错：TypeError: crypto$2.getRandomValues is not a function

 "engines": {
    "install-node": "22",
    "node": ">=12.0.0"
  },
"scripts": {
    "test": "vitest"
  }

增加配置文件

import { defineConfig } from 'vite'

export default defineConfig({
  test: {
    // ...
  },
})

新建xxx.test.ts或xxx.test.js结尾的单元测试文件,编写测试用例

//1. vitest默认没有开启全局API，使用时要导入需要使用的API
import { expect, test } from "vitest";

// 2. 导入待测试方法
import { sum } from './src/common/utils/tools';

// test(testName, callbackFn)
test('add 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});
export const sum = (a: number, b: number) => a + b;

运行测试用例：无需切换路径，直接在控制台执行tnpm run test命令或者 npx vitest

配置覆盖率目标
运行 tnpm run coverage
还需要安装
“@vitest/browser”: “^3.0.7”,
“@vitest/coverage-v8”: “^3.0.7”,
执行结果

常用API
参考文档：
https://cn.vitest.dev/api/expect.html#tostrictequal
● describe：用于在当前上下文中定义一个新的测试套件，每个测试套件都会形成一个单独的作用域，通过describe方法可以将多个相关的测试用例组织在一起，方便测试用例的管理
● test/it：用于定义一组包含测试期望的测试用例，它接收测试名称和一个含有测试期望的函数，同时还可以传递第三个参数来指定一个异步方法等待多长时间后终止测试（默认时间是5s）
● expect：用于创建断言
○ soft 不会在断言失败时终止测试执行，而是继续运行并将失败标记为测试失败
○ poll 重新运行断言，直到成功为止
○ not 用于否定断言
○ toBe 断言原始类型是否相等，或者对象是否共享相同的引用。即检查基础类型的值和引用类型的地址是否相等
○ toEqual 断言实际值是否等于接收值，或者具有同样的结构，如果是对象类型（将会使用递归的方法进行比较）
○ toStrictEqual 断言实际值是否等于接收到的值，或者如果它是一个对象（递归地比较它们）并且具有相同的类型，则具有相同的结构.
与 .toEqual 的区别：
■ 检查具有 undefined 属性的键。例如使用 .toStrictEqual 时， {a: undefined, b: 2} 与 {b: 2} 不匹配。
■ 检查数组稀疏性。例如使用 .toStrictEqual 时， [, 1] 与 [undefined, 1] 不匹配。
■ 检查对象类型是否相等。例如具有字段 a 和 b 的类实例不等于具有字段 a 和 b 的文字对象。
○ toMatch 断言字符串是否与正则表达式或字符串匹配

钩子函数
用于初始化和清理测试环境
● beforeEach: 注册一个回调函数，在当前上下文中的每个测试运行前调用。如果函数返回一个 Promise ，Vitest 会等待承诺解析后再运行测试。
import { beforeEach } from ‘vitest’

beforeEach(async () => {
// 在每个测试运行之前清除模拟并添加一些测试数据。
await stopMocking()
await addUser({ name: ‘John’ })
})
● afterEach: 注册一个回调,在当前上下文中的每个测试运行之后被调用。
import { afterEach } from ‘vitest’

afterEach(async () => {
await clearTestingData() // 在每个测试运行之后清除测试数据。
})
● beforeAll: 注册一个回调，在开始运行当前上下文中的所有测试之前被调用一次。
import { beforeAll } from ‘vitest’

beforeAll(async () => {
await startMocking() // 在所有测试运行之前调用一次。
})
● afterAll: 注册一个回调，在当前上下文中运行所有测试后被调用一次
import { afterAll } from ‘vitest’

afterAll(async () => {
await stopMocking() // 此方法在所有测试运行之后被调用。
})
编写测试用例

新建一个xxx.test.ts或xxx.test.js结尾的单元测试文件,编写测试用例
运行测试用例 tnpm run test
通过控制台的输出分析测试结果，完成测试后，输入q退出测试
使用 @vitest/ui
Vitest 由 Vite 提供能力，在运行测试时有一个开发服务器。这允许 Vitest 提供一个漂亮的 UI 界面来查看并与测试交互。Vitest 的 UI 界面是可选的，你可以通过以下安装：
npm i -D @vitest/ui
配置"test:ui": “vitest --ui”
tnpm tun test:ui