Test Explorer UI 是 VSCode 中统一管理多框架测试的轻量界面，支持运行、调试、筛选与结果可视化；需安装对应适配器并配置项目环境方可启用。
VSCode 的 Test Explorer UI 是一个轻量但强大的测试管理界面，它把散落在不同测试框架（如 Jest、Mocha、Vitest、pytest 等）中的测试用例，统一聚合到侧边栏里，点一点就能运行、跳转、调试、筛选和查看结果。
安装与基础配置
先在扩展市场搜索并安装 Test Explorer UI（作者是 Hbenl），再根据你项目用的测试框架，装对应的适配器，比如：
- Jest → Jest Test Explorer
- Vitest → Vitest Test Explorer
- pytest → Python Test Explorer
- Mocha → Mocha Test Explorer
装好后，VSCode 通常会自动识别项目中的测试配置（如 jest.config.js 或 vitest.config.ts）。如果没反应，检查工作区根目录下是否有合法配置，或在设置中手动指定测试命令路径。
快速运行与状态可视化
打开侧边栏的 Test Explorer（快捷键 Ctrl+Shift+P → 输入 “Test: Focus on Test View”），你会看到按文件/套件/用例层级组织的树形结构。每个测试旁有图标标识状态：
- ✅ 已通过
- ❌ 失败（点击可跳转到报错行）
- ⏱️ 正在运行
- ⏸️ 已跳过（
test.skip或it.skip）
右键单个测试可运行、调试、重试；点击文件夹图标可运行整个文件；顶部工具栏还有「全部运行」「重新运行失败」等快捷按钮。
筛选、搜索与聚焦开发
写测试时经常只想看某几个用例——Test Explorer 支持实时过滤：
- 顶部输入框输入关键词，自动匹配测试名或文件名
- 点击「Failed only」只显示失败项，方便集中修复
- 勾选「Auto Run on Save」后，保存测试文件会自动触发运行（需搭配对应适配器支持）
也可以用 VSCode 的多光标或命令面板快速定位：比如 Ctrl+P 输入 “Test: Run Test at Cursor”，直接运行当前光标所在行的测试，省去鼠标点选。
调试与结果整合
点击测试旁的虫子图标即可启动调试，断点、变量监视、调用栈全都有，和普通代码调试体验一致。测试输出日志默认显示在 TEST OUTPUT 面板中，失败堆栈会高亮错误位置，支持点击跳转源码。
如果你同时用了多个测试框架，只要各自适配器都启用，Test Explorer UI 会把它们合并展示在同一视图里（用不同图标或颜色区分），避免来回切换窗口。
基本上就这些——不复杂但容易忽略的是：它不是“开箱即用”的万能插件，关键在选对适配器、配好项目环境。一旦跑通，写测试、查问题、做 CI 前验证都会顺手很多。
