Vitest 团队发布 4.0 版本，提供稳定的浏览器模式与视觉回归测试功能

Vitest是Vite原生的测试框架，最近发布了4.0版本，带来了基于浏览器的测试、视觉回归测试能力以及开发者体验方面的多项改进。

Vitest 4.0引入了若干重要新特性，包括浏览器模式（Browser Mode）正式进入稳定状态、内置视觉回归测试支持、Playwright Traces集成，以及增强的调试能力。此次发布也包含一些破坏性变更，开发者在升级前需仔细查阅迁移指南。

其中一项重大更新是浏览器模式的稳定化。该功能此前一直处于实验阶段，现在允许开发者在真实浏览器中运行测试，而非使用jsdom或happy-dom等模拟环境，从而能够获得更准确的测试结果。要使用浏览器模式，开发者现在需要单独安装对应的提供商的包，例如@vitest/browser-playwright、@vitest/browser-webdriverio或@vitest/browser-preview。这一调整简化了自定义选项的配置，并移除了对TypeScript引用指令（reference directives）的需求。

上下文（context）的导入路径也已变更，原先从@vitest/browser/context导入，现在应直接从vitest/browser导入。为保持兼容性，旧路径在下一个主版本之前仍可继续使用。

Vitest 4.0通过toMatchScreenshot断言实现视觉回归测试。框架会捕获UI组件或页面的截图，并与基准图像进行比对，以检测意外的视觉变更。同时新增了toBeInViewport匹配器，利用IntersectionObserver API判断某个元素是否当前处于视口内。

此外，Vitest 4.0支持为浏览器测试生成Playwright Traces。开发者可在test.browser配置中设置trace选项，或通过browser.trace标志启用追踪，可选值包括on、off、on-first-retry、on-all-retries和retain-on-failure。生成的traces会作为注解出现在报告器中，并可通过Playwright Trace Viewer查看。

VS Code扩展现在在运行浏览器测试时提供“Debug Test”按钮，显著改善调试体验。开发者还可结合playwright和webdriverio提供者，在启动Vitest时添加inspect标志，手动连接DevTools进行调试。

报告器方面也有更新：basic reporter已被移除，可用summary: false的默认报告器替代；默认报告器现仅在运行单个测试文件时以树形格式输出测试结果，而新增的树报告器则适用于希望始终以树形结构查看测试的用户；详情报告器（verbose reporter）现在无论是否在CI环境中，都会在测试完成后逐条打印结果（此前仅在CI中如此）。

社区对Vitest 4.0反响很积极。有Reddit用户指出，原生集成视觉回归测试意味着无需再引入Percy或Chromatic等外部依赖。该开发者还称赞Vitest的开发者体验持续优于Jest，如今更成为一个功能完备的测试解决方案，许多过去需借助独立工具实现的功能现已内置。

不过，部分开发者在升级过程中遇到了问题。一则近期GitHub issue报告称，当Vitest 4.x与Vite 7.1.0或更早版本搭配使用时会出现TypeScript错误，尽管Vitest 4.x声明兼容vite ^6.0.0或^7.0.0。错误表现为ModuleRunnerOptions缺少createImportMeta属性，且仅在vitest.config.ts被纳入TypeScript上下文时触发。该问题已被标记为影响特定使用场景的轻微bug。

由于Vitest 4.0包含破坏性变更，可能影响现有项目，官方已发布详细的迁移指南协助开发者升级。完整变更列表可在GitHub上的Vitest 4 Changelog 中查阅。

据VoidZero博客透露，过去一年Vitest的周下载量已从700万增长至1700万。

Vitest是一个开源测试框架，专为Vite项目打造，但也可独立使用。它提供与Jest兼容的API（如expect、快照测试和覆盖率功能），并通过esbuild为ESM、TypeScript和JSX提供一流支持。

原文链接：

Vitest Team Releases Version 4.0 with Stable Browser Mode and Visual Regression Testing