webstorm 中点边栏图标运行 vitest 需严丝合缝三处：node ≥20.0.0 且解释器路径手动指定真实可执行文件、vitest.mjs 入口须用文件选择器精准定位（尤其 pnpm monorepo）、vitest.config.ts 必须置于根目录并在运行配置中手动指定路径，否则配置不生效、mock 失效、dom 报错。

WebStorm 里点一下就跑 Vitest，不是靠“自动识别”，而是三处路径和版本必须严丝合缝：Node ≥20.0.0、vitest.mjs 真实路径、vitest.config.ts 在根目录且被手动指定。

Node 解释器路径必须手动指向 v20+ 可执行文件

WebStorm Settings → Languages & Frameworks → JavaScript → Node.js 里显示的“Project”别名，90% 是假的。终端里 node -v 输出 v20.12.0，但 IDE 实际运行时仍用系统默认 v18，就会直接报 ERR_UNSUPPORTED_ESM_URL_SCHEME。

• 别信自动检测：点开文件选择器，精准选中 /path/to/node-v20.12.0/bin/node（macOS/Linux）或 C:\Program Files\nodejs\node.exe（Windows）
• 若用 nvm 或 nvm-windows，切完版本后必须重启 WebStorm，否则 IDE 缓存旧路径
• 在 WebStorm 内置终端执行 which node 和 node -v，结果必须与设置页里选中的路径一致

vitest.mjs 入口路径不能手输，得用文件选择器逐层定位

pnpm monorepo 下，vitest 很可能不在 node_modules/vitest，而在 node_modules/.pnpm/vitest@4.0.7_... 子目录里。WebStorm 手输路径或依赖自动发现，基本找不到，直接报 Cannot find module 'vitest'。

面向设计的AXUI前端框架表单

面向设计的AXUI前端框架表单是一款包含表格、列表、弹窗等的AXUI前端框架表单下载。

下载

• 进 Run → Edit Configurations → Vitest → 找到 Vitest package 字段，点击右侧文件选择按钮
• 逐层打开 node_modules，找到真实的 vitest.mjs（Vitest 4+ 推荐 ESM 入口，比 bin/vitest.js 更稳）
• 顺手检查项目 package.json：确保仍有 "type": "module" 和完整 "exports" 字段，删了会导致 WebStorm 解析不到正确入口

边栏绿色三角点不了？先绕过 --testNamePattern 参数 bug

WebStorm 2025.2+ 自动生成的运行命令，会把 --testNamePattern 拼成 --testNamePattern = "^test name$"（等号后多空格），而 Vitest 只认 --testNamePattern="^test name$"。现象是控制台输出带前导空格和问号的乱码字符串，测试静默跳过或全量执行。

• 临时解法：不点边栏图标，右键测试文件 → 选 Run "xxx.test.ts"，走文件级运行，完全绕过参数拼接
• 长期解法：进 Vitest 运行配置 → Vitest options 栏填入 --testNamePattern="^your test name$"，并勾选 Use --testNamePattern from editor（如果该选项存在）
• 验证是否修好：点开 Modify options 查最终命令行，确认 --testNamePattern= 后面是紧贴双引号的，中间没空格

断点不命中？你根本没进 Vitest 的测试环境

在测试函数里打了断点，点普通 Debug 按钮启动，结果提示 No tests found，控制台也看不到 vi.mock 或 defineComponent 行为——说明 WebStorm 启动的是纯 Node.js 进程，跳过了 Vitest 的环境初始化逻辑。

• 必须用测试函数旁的专用图标：右键绿色三角 → 选 Debug "test name"（注意括号里是空的，不是普通 Debug）
• 确保 vitest.config.ts 中 environment 配置匹配目标：组件测试要 "jsdom"，纯工具函数可设 "node"
• 如果用了 setupFiles 或全局 mock，它们只在 Vitest 专用模式下加载，普通 Node.js 调试模式里压根不生效

最常被忽略的其实是“配置文件是否真被加载”——vitest.config.ts 放错位置、命名不标准、或没在运行配置里手动指定路径，都会导致 DOM API 报错、mock 失效、甚至测试文件根本不出现在边栏。WebStorm 不会像命令行那样向上查找，它只认你亲手告诉它的那个路径。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！