vite 项目接入 vitest 轻量高效，共享 vite 配置、无需额外构建；安装 vitest 和 @vitest/coverage-v8，配置 test 字段指定 environment、include 等，编写测试文件并添加 npm script 运行。
在 Vite 项目中接入 Vitest 做单元测试非常轻量，官方推荐且开箱即用。Vitest 与 Vite 共享相同的配置（如别名、环境变量、TS 支持），无需额外配置构建工具，直接基于 Vite 的开发服务器能力运行测试。
安装 Vitest 和相关依赖
执行以下命令安装核心测试库和类型支持：
-
npm install -D vitest @vitest/coverage-v8（推荐用
@vitest/coverage-v8获取精准覆盖率） - 若项目用 TypeScript，确保已安装
typescript和@types/node（Vitest 运行时需 Node 类型） - 如需模拟组件（如 Vue/React），按框架安装对应插件，例如：
npm install -D @vue/test-utils
配置 vite.config.ts 支持测试
Vitest 默认读取 vite.config.ts，通常无需修改；但建议显式导出测试配置，便于维护：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
// 测试专用配置可放在这里，也可单独写 vite.config.test.ts
})
更推荐在 vite.config.ts 中通过 defineConfig 的第二个参数传入测试配置，或使用 test 字段（Vitest v1.0+ 支持）：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
test: {
environment: 'jsdom', // 浏览器环境（Vue/React 推荐），node 适合纯逻辑
include: ['src/**/*.{test,spec}.{js,ts}'],
globals: true,
setupFiles: ['./src/test-setup.ts'], // 全局初始化（如 mock、全局断言扩展）
coverage: {
provider: 'v8',
reporter: ['text', 'html'],
exclude: ['node_modules/', 'src/main.ts']
}
}
})
编写第一个测试文件
在 src/utils/formatDate.test.ts 中写一个简单测试：
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
// src/utils/formatDate.ts
export function formatDate(date: Date): string {
return date.toISOString().split('T')[0]
}
// src/utils/formatDate.test.ts
import { describe, it, expect } from 'vitest'
import { formatDate } from './formatDate'
describe('formatDate', () => {
it('returns YYYY-MM-DD for a given date', () => {
const d = new Date('2023-05-15T10:30:00Z')
expect(formatDate(d)).toBe('2023-05-15')
})
})
注意：Vitest 默认启用 globals: true，所以不用写 import { describe, it, expect } from 'vitest' 也能运行（但建议显式导入，提高可读性和 IDE 支持）。
添加脚本并运行测试
在 package.json 的 scripts 中加入：
"scripts": {
"test": "vitest",
"test:watch": "vitest --watch",
"test:coverage": "vitest run --coverage"
}
然后运行：
- npm run test —— 一次性运行所有测试
- npm run test:watch —— 启动监听模式，文件保存后自动重跑
-
npm run test:coverage —— 生成覆盖率报告（默认输出到
coverage/）
首次运行会自动生成 vitest.config.ts（可选），但不强制要求——Vitest 优先读 vite.config.ts 中的 test 字段。
不复杂但容易忽略的是：确保 test 配置里的 environment 匹配你的代码运行上下文（jsdom 用于 DOM 相关，node 用于纯函数或服务端逻辑），否则可能报 document is not defined 等错误。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
