核心特性
Vitest 的设计哲学和关键技术特性
Vite原生
基于Vite的模块解析和转换。共享Vite配置和插件系统，无需额外配置。
极速测试
利用Vite的HMR和ESM支持，测试速度极快。比传统测试框架快10-100倍。
Jest兼容
兼容Jest API，可无缝迁移。支持expect、describe、it等Jest语法。
TypeScript
原生TypeScript支持，无需额外配置。类型安全的测试编写。
生态系统
围绕 Vitest 构建的完整工具链
Vue测试
@vue/test-utils集成。支持Vue组件测试，与Vite Vue插件深度集成。
React测试
@testing-library/react集成。支持React组件测试，与Vite React插件集成。
覆盖率
内置代码覆盖率支持。支持v8和istanbul两种覆盖率提供者。
UI测试
Vitest UI提供可视化测试界面。实时查看测试结果和覆盖率报告。
快照测试
支持快照测试，与Jest快照兼容。可序列化组件、DOM、CSS等。
浏览器测试
支持浏览器环境测试。可在真实浏览器中运行测试，测试浏览器API。
快速入门
# 安装Vitest
npm install vitest --save-dev
# 创建测试文件
echo 'import { describe, it, expect } from "vitest";
function sum(a, b) {
return a + b;
}
describe("sum", () => {
it("adds 1 + 2 to equal 3", () => {
expect(sum(1, 2)).toBe(3);
});
});' > sum.test.js
# 运行测试
npx vitest
# 运行所有测试
npx vitest run
# 生成覆盖率报告
npx vitest --coverage配置示例
// vitest.config.ts
import { defineConfig } from "vitest/config";
import vue from "@vitejs/plugin-vue";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [vue(), react()],
test: {
// 测试环境
environment: "jsdom",
// 全局变量
globals: true,
// 覆盖率配置
coverage: {
provider: "v8",
reporter: ["text", "json", "html"],
exclude: [
"node_modules/",
"src/test/"
]
},
// 设置文件
setupFiles: ["./src/test/setup.ts"],
// 包含模式
include: ["**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
// 排除模式
exclude: ["node_modules", "dist", ".idea", ".git", ".cache"]
}
});学习资源
与其他测试框架对比
vs Jest
Vitest性能更好，与Vite集成更紧密。Jest生态更成熟，社区更大，适合传统项目。
vs Mocha
Vitest功能更丰富，配置更简单。Mocha更灵活，适合需要自定义配置的项目。
vs Jasmine
Vitest现代特性更多，性能更好。Jasmine更轻量，适合简单项目。