必须有vitest.config.ts(硬门槛)和本地安装vitest,VSCode插件仅提供UI;配置testMatch匹配测试路径,Vue/React需启用对应插件,watch模式需手动启终端命令。

VSCode 里点“运行测试”没反应,缺的是 vitest 插件还是 vitest.config.ts?
直接结论:两者都得有,但优先级不同——vitest.config.ts 是硬门槛,没它,插件再全也启动不了测试进程。
常见错误现象:Run Test 按钮灰掉、右键菜单没有 Run Test、终端报错 Cannot find module 'vitest' or config。
- 必须在项目根目录存在
vitest.config.ts(或.js),哪怕只写export default {};空配置比没配置强 -
vitest必须是本地安装(npm install --save-dev vitest),全局安装无效 - VSCode 插件
vitest-explorer(官方推荐)只负责 UI 和命令绑定,不提供执行环境
装了 vitest-explorer 插件,但测试用例不自动识别,怎么调 include 和 testMatch?
不是插件问题,是 Vitest 配置没对上你的文件结构。插件只是读取 vitest.config.ts 里的扫描规则,然后渲染按钮。
典型场景:你把测试文件放在 src/__tests__/Button.test.ts,但默认配置只扫 **/*.spec.ts。
- 用
testMatch显式声明路径模式,比如:testMatch: ['**/__tests__/**/*.test.ts'] - 避免混用
include和testMatch:前者是 glob 过滤已匹配的文件,后者才是决定“哪些文件算测试”的第一道门 - Windows 下路径分隔符不用特别处理,Vitest 内部已 normalize,写
/或\都行 - 改完配置后,VSCode 不会自动重载——关掉测试侧边栏再打开,或按
Ctrl+Shift+P→Vitest: Restart Server
点击 Run Test 报错 Cannot find module 'vue' 或 ReferenceError: React is not defined
这是环境上下文缺失,Vitest 启动时没加载对应框架的预设,和 VSCode 无关,纯配置问题。
使用场景:你在 Vue/React 项目里跑单元测试,但 vitest.config.ts 没启用对应插件。
- Vue 项目必须加
import { defineConfig } from 'vitest/config'; import vue from '@vitejs/plugin-vue';,并在plugins: [vue()]中注册 - React 项目要装
@vitejs/plugin-react并启用,否则 JSX 解析失败,describe外的顶层 JSX 就会报ReferenceError - 别只配
environment: 'jsdom'——它只模拟 DOM,不解决框架 runtime 缺失问题 - 如果用了
setupFiles(比如引入vitest-dom),确保路径正确,且该文件本身不依赖未 resolve 的模块
为什么改了代码,VSCode 里点 Run Test 还是跑旧结果?
不是缓存没清,是 Vitest 默认开启了 watch,但 VSCode 插件触发的是单次执行(vitest run),不会监听变更。
性能影响:每次点按钮都重新 spawn 进程,比 watch 模式慢 2–3 倍,尤其带 type-check 的项目。
- 想实时反馈?别点按钮,改用终端手动启
vitest --watch,它会自动 rerun 变更文件 - 插件里点
Debug Test会走调试通道,但依然是一次性执行;如需断点调试 + 自动重跑,只能靠vitest --inspect-brk配合 Chrome DevTools - CI 场景下务必用
vitest run(无 watch),否则卡住不退出
最常被忽略的一点:Vitest 的 cache 目录(默认 node_modules/.vitest)不清理,有时会缓存旧的类型定义或 transform 结果,删掉它比重启 VSCode 更有效。


















