vitest 可直接在 vite 项目中零配置启用:安装 vitest 和 @vitest/coverage-v8,于 vite.config.ts 添加 test 环境、匹配规则等配置,npm script 加 "test": "vitest",测试文件命名含 .test. 或 .spec. 即可快速运行。

直接在 Vite 项目里配 Vitest 做单元测试,不用额外构建、不改现有配置,几行就能跑起来。
安装核心依赖
执行命令安装测试运行时和覆盖率工具:
npm install -D vitest @vitest/coverage-v8- 如果是 TypeScript 项目,确保已有
typescript和@types/node - Vue 或 React 项目还需对应工具库,比如
@vue/test-utils或@testing-library/react
配置 vite.config.ts 的 test 字段
Vitest 默认读取 vite.config.ts,推荐直接在其中添加 test 配置块,无需新建文件:
-
environment: 'jsdom'(浏览器环境,适合组件)或'node'(纯逻辑函数) -
include: ['src/**/*.{test,spec}.{js,ts}']明确匹配测试文件 -
globals: true启用describe/it/expect全局可用 -
setupFiles: ['./src/test-setup.ts'](可选)统一注入 mock、断言扩展等
添加 npm 脚本并运行
在 package.json 的 scripts 中加一行:
-
"test": "vitest"—— 运行交互式 watch 模式 -
"test:run": "vitest run"—— 一次性执行,适合 CI
终端执行 npm test 就能立即看到结果,首次启动通常不到 300ms。
写第一个测试文件
文件名必须含 .test. 或 .spec.(如 utils.test.ts),内容示例:
- 导入待测函数和
expect/test - 每个
test只验证一个明确行为,输入输出清晰 - 用
toBe测原始值,toEqual测对象/数组结构
不需要 DOM?选 environment: 'node';要渲染组件?配 jsdom 或 happy-dom 即可。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











