vite 和 vitest 是天然搭档，基于 vite 构建并复用其配置，安装只需两步：npm install -d vitest 并添加 test 脚本；推荐用 vitest.config.ts 配置，支持自动继承 vite.config.ts 的别名和插件；编写 .test.ts 文件后运行 npm run test 即可，支持热更新；组件测试需安装 jsdom/happy-dom 并调整 environment。
Vite 和 Vitest 是天然搭档，配合起来非常轻量、高效。Vitest 基于 Vite 构建，直接复用 Vite 的配置（如别名、插件、环境变量），无需重复设置，开箱即用。
安装 Vitest 并集成到 Vite 项目
只需两步就能完成基础接入：
- 在已有 Vite 项目中执行：npm install -D vitest
- 在 package.json 的 scripts 中添加测试命令：
"test": "vitest"，还可补充："test:ui": "vitest --ui"（可视化界面）"test:coverage": "vitest --coverage"（生成覆盖率报告）
配置 Vitest（推荐使用独立配置文件）
创建 vitest.config.ts（或 .js），内容简洁明了：
import { defineConfig } from 'vitest/config'
export default defineConfig({
test: {
globals: true, // 自动全局注入 describe/it/expect
environment: 'node', // 纯逻辑测试用 node；DOM 测试换为 'jsdom' 或 'happy-dom'
include: ['src/**/*.{test,spec}.{js,ts,jsx,tsx}'],
coverage: {
provider: 'v8',
reporter: ['text', 'html'],
exclude: ['node_modules/', 'dist/', 'src/main.ts']
}
}
})
注意：如果项目已有 vite.config.ts，Vitest 会自动继承其中的 resolve.alias、plugins 等配置，无需手动同步。
编写第一个测试文件
约定命名：函数文件为 src/utils/math.ts，对应测试文件为 src/utils/math.test.ts：
// src/utils/math.ts
export const add = (a: number, b: number) => a + b
// src/utils/math.test.ts
import { describe, it, expect } from 'vitest'
import { add } from './math'
describe('add', () => {
it('returns correct sum', () => {
expect(add(2, 3)).toBe(5)
})
})
运行 npm run test 即可看到通过结果。修改代码后，Vitest 还支持热更新——保存即重跑，开发体验流畅。
前端组件测试需额外准备环境
若测试 Vue/React 组件（涉及 DOM 操作），需切换测试环境并安装依赖：
- 安装模拟 DOM 的库：npm install -D jsdom（轻量通用）或 happy-dom（Vue 场景性能更优）
- 将配置中 environment 改为 'jsdom' 或 'happy-dom'
- Vue 项目建议加装：@vue/test-utils；React 推荐：@testing-library/react
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
