一、什么是 VitestVitest发音为 “veetest”是一个由 Vite 驱动的下一代测试框架。它直接复用 Vite 的配置、转换器、解析器和插件让你在应用中使用的同一套配置来运行测试。Vitest 提供了对大多数 Jest API 和生态库的兼容性在大多数项目中可以直接替换 Jest 使用。Vitest 的核心特点包括与 Vite 共享配置自动读取vite.config.ts插件、别名等配置开箱即用极速的 Watch 模式基于 HMR 机制仅重新运行受影响的测试原生 ESM / TypeScript / JSX 支持无需额外配置即可运行现代 JavaScript 代码Jest 兼容 APIdescribe、it、expect、vi.fn()等 API 与 Jest 高度一致多框架组件测试支持 Vue、React、Svelte、Lit、Marko 等主流框架内置 Mock 能力基于 Tinyspy 提供vi对象进行 mocking支持vi.fn()、vi.spyOn()、vi.mock()等代码覆盖率支持 v8 原生覆盖率和 istanbul 插桩覆盖率浏览器模式可在真实浏览器中运行组件测试替代传统的 JSDOM 模拟多线程并行执行通过 Tinypool 实现多进程/多线程并行测试自动隔离各测试文件的环境版本要求Vitest 需要 Vite v6.0.0 和 Node v20.0.0。二、快速入门2.1 安装npminstall-Dvitest# 或pnpmadd-Dvitest# 或yarnadd-Dvitest2.2 编写第一个测试// sum.jsexportfunctionsum(a,b){returnab}// sum.test.jsimport{expect,test}fromvitestimport{sum}from./sum.jstest(adds 1 2 to equal 3,(){expect(sum(1,2)).toBe(3)})测试文件默认需要包含.test.或.spec.作为文件名的一部分。2.3 运行测试在package.json中添加测试脚本{scripts:{test:vitest}}然后运行npmruntestVitest 在开发环境下默认以watch 模式启动修改代码后会自动重新运行相关测试在 CI 环境下自动切换为run 模式一次性运行。你也可以显式指定vitest watch或vitest run。2.4 配置 VitestVitest 最大的优势之一是与 Vite 的统一配置。如果项目根目录存在vite.config.tsVitest 会自动读取其中的插件和配置。如需测试专用配置可以创建vitest.config.ts优先级更高或通过--config指定配置文件路径。如果项目没有使用 Vite也可以独立创建vitest.config.ts来使用 Vitest。Vitest 同样适用于非 Vite 项目如使用 esbuild 或 rollup 的项目可以提升单元测试的运行速度。2.5 与 React Testing Library 集成Vitest 常与 React Testing Library 搭配使用进行组件测试。安装依赖npminstall-Dvitest vitejs/plugin-react jsdom\testing-library/react testing-library/dom testing-library/jest-dom创建vitest.config.tsimport{defineConfig}fromvitest/configimportreactfromvitejs/plugin-reactexportdefaultdefineConfig({plugins:[react()],test:{environment:jsdom,globals:true,},})三、进阶特性3.1 高级 Mock 与 SpyVitest 通过vi对象提供完整的 mocking 能力import{vi,expect,test}fromvitest// Mock 函数constmockFnvi.fn().mockReturnValue(42)constasyncMockvi.fn().mockResolvedValue({success:true})// Spy 监听已有方法constobj{greet:()hello}constspyvi.spyOn(obj,greet)obj.greet()expect(spy).toHaveBeenCalledTimes(1)// Mock 模块vi.mock(./api,()({fetchUser:vi.fn().mockResolvedValue({name:Alice}),}))关键要点vi.mock会被提升到文件顶部使用vi.doMock可实现动态 mockingvi.hoisted允许在 mock 工厂函数中引用外部变量vi.fn()和vi.spyOn()共享相同的方法mockReturnValue、mockImplementation等3.2 代码覆盖率Vitest 支持两种覆盖率提供者提供者特点适用场景v8默认速度更快基于原生 V8 覆盖率大多数项目istanbul兼容性更好基于插桩需要与旧工具链兼容在vitest.config.ts中配置exportdefaultdefineConfig({test:{coverage:{provider:v8,reporter:[text,json,html],thresholds:{statements:80,branches:70,functions:80,lines:80,},},},})也可以通过命令行vitest --coverage快速启用覆盖率统计。建议将覆盖率阈值配置为硬性门禁在 CI 中覆盖率不达标时直接阻断构建。3.3 UI 模式Vitest 提供了可视化的测试交互界面需要安装vitest/ui包npminstall-Dvitest/ui vitest--uiUI 模式是交互式的需要 Vitest 在 watch 模式下运行默认模式。自 Vitest 4.1 起如果api.host被设置为非 localhost 地址UI 模式会自动变为只读模式以确保安全。3.4 浏览器模式Vitest 支持在真实浏览器中运行组件测试作为 JSDOM 的替代方案。浏览器模式能捕获 JSDOM 无法覆盖的真实浏览器 API 行为例如布局引擎offsetTop等和window.navigation等特性。3.5 从 Jest 迁移Vitest 的 API 设计与 Jest 兼容迁移过程相对平滑。主要变更包括JestVitest说明jest.fn()vi.fn()Mock 函数jest.spyOn()vi.spyOn()Spy 监听jest.mock()vi.mock()模块 Mockjest.useFakeTimers()vi.useFakeTimers()定时器 Mock此外默认情况下 Vitest 不启用全局变量describe、it、expect等需从vitest导入可以通过配置项globals: true启用全局变量以兼容 Jest 的写法。Vitest 4 引入的自动化迁移工具可以将jest.fn()自动转换为vi.fn()大幅降低迁移成本。实际迁移案例中有团队报告测试执行时间从 50 秒降至 5 秒10 倍提速同时获得原生 ESM 支持和更好的 TypeScript 集成。四、什么情况下应该使用 Vitest✅ 强烈推荐的场景1. 项目基于 Vite 构建这是 Vitest 最核心的使用场景。如果项目已经使用 Vite尤其是 Vue3/Vite 项目Vitest 可以无缝复用 Vite 配置避免维护两套构建管道的复杂性。2. 追求极致的开发反馈速度Vitest 在 watch 模式下的测试运行速度比 Jest 快 10-20 倍特别适合现代 TypeScript 项目。如果你需要快速的单元测试和组件测试在每次保存或提交时都能即时获得反馈Vitest 是最佳选择。3. 新项目/绿地项目对于新项目尤其是采用现代工具链ESM、TypeScript、Vite的项目Vitest 是首选测试框架。它在 ESM 支持方面具有原生优势而 Jest 的 ESM 支持仍处于实验阶段。4. 需要原生 ESM 和 TypeScript 支持Vitest 开箱即用地支持 ESM、TypeScript 和 JSX无需像 Jest 那样额外配置 Babel 或 ts-jest。5. 需要组件测试Vitest 支持多种前端框架的组件测试并且可以与 Storybook 等工具集成。如果需要 React/Vue/Svelte 等框架的组件测试Vitest 配合 Testing Library 是成熟的方案。6. 从 Jest 迁移的项目Vitest 提供了对 Jest API 的高度兼容性和自动化迁移工具使迁移变得简单直接。典型使用场景汇总前端工具函数和业务逻辑的单元测试React/Vue/Svelte 等框架的组件测试需要快速 TDD 循环的开发流程CI/CD 流水线中的快速测试执行从 Jest 迁移以解决 ESM/性能问题五、什么情况下不建议使用 Vitest❌ 不推荐的场景1. 需要真实的端到端E2E测试Vitest 是一个单元和组件测试运行器而非端到端自动化框架。它运行在模拟环境Node、jsdom、happy-dom中不具备浏览器自动化能力。对于需要验证真实用户流程、跨浏览器兼容性的场景应使用 Playwright 或 Cypress。2. 需要测试依赖真实浏览器 API 的代码虽然 Vitest 提供了浏览器模式但传统的 Node.js 环境jsdom在实现上仍有限制例如缺少布局引擎offsetTop、window.navigation等特性。如果代码严重依赖这些浏览器 APICypress 或 Playwright 更合适。3. 超大规模测试套件80,000 测试有评测指出在极大规模的测试套件超过 80,000 个测试中Jest 的分片sharding实现比 Vitest 更可预测。不过对于绝大多数项目而言这个规模并不常见。4. 团队已有成熟的 Jest 测试基础设施且无迁移需求如果项目已经有一套运行良好的 Jest 测试体系且没有遇到 ESM、性能等痛点迁移的投入产出比可能不高。正如社区建议“新项目选 Vitest已有 Jest 的项目保持现状”。Vitest vs 其他工具的定位对比维度VitestJestPlaywright/Cypress测试类型单元 组件单元 组件E2E 集成运行环境模拟Node/jsdom模拟Node/jsdom真实浏览器核心优势速度、ESM、Vite 集成生态成熟、社区大真实浏览器行为验证适用阶段开发阶段快速反馈开发阶段发布前验证六、官方学习参考资料资源链接说明Vitest 官方文档https://vitest.dev最新版完整文档Vitest 中文文档https://cn.vitest.dev官方中文翻译快速入门指南https://vitest.dev/guide/安装、编写测试、运行特性概览https://vitest.dev/guide/features全部核心特性介绍配置参考https://vitest.dev/config/所有配置项说明API 参考https://vitest.dev/api/vi、expect、test等 APIMock 指南https://vitest.dev/guide/mockingMock 详细用法覆盖率指南https://vitest.dev/guide/coveragev8/istanbul 覆盖率配置与其他框架对比https://cn.vitest.dev/guide/comparisons.html与 Jest、Cypress 等的对比从 Jest 迁移https://cn.vitest.dev/guide/migration迁移指南和 API 差异浏览器模式https://vitest.dev/guide/browser/真实浏览器组件测试UI 模式https://vitest.dev/guide/ui可视化测试界面VS Code 扩展Vitest 官方 VS Code 扩展IDE 集成增强在线试用https://vitest.newStackBlitz 在线体验七、总结Vitest 是 Vite 生态中的重要组成部分它的核心价值在于速度和统一的配置体验。对于使用 Vite 的项目、追求快速反馈的开发团队以及新项目而言Vitest 是一个值得优先考虑的测试框架。但它并非万能工具——端到端测试仍需要 Playwright/Cypress 等专门工具超大测试套件也可能需要考虑分片策略的差异。在实际技术选型中建议综合评估项目的构建工具、测试规模、团队经验等因素必要时可以将 Vitest单元/组件测试与 Playwright/CypressE2E 测试组合使用构建完整的测试策略。