必须有vitest.config.ts且vitest本地安装,缺一不可;否则VSCode的Run Test按钮灰掉、右键无选项,因Vitest启动链在配置文件或执行环境缺失处中断。

必须有 vitest.config.ts,且 vitest 是本地安装——缺一不可,否则 VSCode 里点“Run Test”根本不会启动进程。
为什么 Run Test 按钮灰掉或右键没选项
不是插件没装对,是 Vitest 启动链断在第一步:没有配置文件或执行环境缺失。
-
vitest.config.ts必须存在于项目根目录,哪怕只写export default {};——空配置比不配置强 -
vitest必须通过npm install --save-dev vitest本地安装;全局安装(npm install -g vitest)完全无效 - VSCode 插件
vitest-explorer只负责渲染按钮和转发命令,不提供运行时;它读取的是vitest.config.ts里的testMatch或include规则 - 改完配置后,VSCode 不自动重载:关掉测试侧边栏再打开,或按
Ctrl+Shift+P→ 输入Vitest: Restart Server
Vue/React 项目点击 Run Test 报 ReferenceError: React is not defined 或 Cannot find module 'vue'
这不是路径问题,是框架 runtime 缺失——Vitest 启动时没加载对应预设。
- Vue 项目需在
vitest.config.ts中导入并启用插件:import vue from '@vitejs/plugin-vue';,然后加到plugins: [vue()] - React 项目要装
@vitejs/plugin-react并注册,否则顶层 JSX 会直接报错;仅配environment: 'jsdom'不够,它只模拟 DOM,不补 React runtime - 如果用了
setupFiles(比如引入@testing-library/vue),确保该文件本身不依赖未 resolve 的模块,否则静默失败
覆盖率数字忽高忽低,或某行标红又标绿
Coverage Gutters 默认只认 lcov.info,而 Vitest 默认输出的是 coverage/vitest-coverage.json——格式不匹配,插件压根读不到。
- 要么让 Vitest 输出兼容格式:
npx vitest --coverage --reporter=lcov,生成coverage/lcov.info - 要么换工具:Wallaby.js 原生支持
vitest-coverage.json,无需转换 - monorepo 场景下注意路径:Vitest 默认输出相对路径(如
SF:../packages/utils/src/foo.ts),而 VSCode 工作区是绝对路径;加--relative参数或配coverage.watermarks - 别信状态栏那个百分比数字——它只反映当前打开文件的局部覆盖率,不是全量;真要看整体,得点开 HTML 报告(
coverage/index.html)
最常被忽略的一点:Vitest 的 watch 模式和覆盖率报告是互斥的。你在 VSCode 里点 Run Test,走的是单次执行流程;想持续看覆盖率变化,得手动跑 npx vitest --coverage --watch,再配合 Coverage Gutters 刷新装饰——UI 插件不接管覆盖率计算逻辑,只做展示层。


















