第26章 Vitest 与 Jest 及 Cypress 的对比解析

与其他测试运行器的比较

Jest

Jest 通过为大多数 JavaScript 项目提供开箱即用的支持、舒适的 API（it 和 expect），以及大多数配置所需的完整测试功能（快照、模拟、覆盖率），从而接管了测试框架领域。我们感谢 Jest 团队和社区创建了一个令人愉悦的测试 API，并推动了如今 Web 生态系统中已成为标准的许多测试模式。

可以在 Vite 环境中使用 Jest。@sodatea 开发了 vite-jest，旨在为 Jest 提供一流的 Vite 集成。由于 Jest 中最后的阻碍因素已得到解决，这对于单元测试是一个可行的选项。

然而，在 Vite 已支持最常见 Web 工具链（TypeScript、JSX、大多数流行 UI 框架）的世界里，Jest 代表着复杂性的重复。如果你的应用由 Vite 驱动，维护两条不同的管道是站不住脚的。使用 Vitest，你可以将开发、构建和测试环境的配置定义为单一管道，共享相同的插件和 vite.config.js。

即使你的库没有使用 Vite（例如使用 esbuild 或 Rollup 构建），Vitest 也是一个有趣的选择，因为它能提供更快的单元测试运行速度，并借助基于 Vite 即时热模块替换（HMR）的默认观察模式大幅提升开发体验（DX）。Vitest 与大多数 Jest API 和生态库保持兼容，因此对于大多数项目，它可以作为 Jest 的直接替代品。

Cypress

Cypress 是一个基于浏览器的测试运行器，是 Vitest 的互补工具。如果你希望使用 Cypress，我们建议将 Vitest 用于应用中所有的无头逻辑，将 Cypress 用于所有基于浏览器的逻辑。

Cypress 以端到端测试工具著称，但其新的组件测试运行器对测试 Vite 组件提供了极好的支持，是测试在浏览器中渲染内容的理想选择。

像 Cypress、WebdriverIO 和 Web Test Runner 这样的基于浏览器的运行器能够捕捉到 Vitest 无法捕捉的问题，因为它们使用了真实的浏览器和真实的浏览器 API。

Cypress 的测试驱动器专注于确定元素是否可见、可访问且可交互。Cypress 专为 UI 开发和测试而构建，其开发体验（DX）围绕测试驱动你的可视化组件展开。你会看到组件与测试报告器一起渲染。测试完成后，组件保持可交互状态，你可以使用浏览器开发者工具调试发生的任何失败。

相比之下，Vitest 专注于为极速无头测试提供最佳开发体验。像 Vitest 这样的基于 Node 的运行器支持各种部分实现的浏览器环境，如 jsdom，它们实现了足够的功能，让你可以快速单元测试任何引用浏览器 API 的代码。权衡之处在于，这些浏览器环境在实现功能上有限制。例如，jsdom 缺少 window.navigation 或布局引擎（offsetTop 等）等多项功能。

最后，与 Web Test Runner 相比，Cypress 测试运行器更像是一个集成开发环境（IDE）而非单纯的测试运行器，因为你在浏览器中也能看到真实渲染的组件，以及其测试结果和日志。

Cypress 也在其产品中集成了 Vite：使用 Vitesse 重建其应用的 UI，并使用 Vite 来测试驱动项目的发展。

我们认为 Cypress 不是单元测试无头代码的好选择，但结合使用 Cypress（用于端到端和组件测试）和 Vitest（用于单元测试）将覆盖你应用的测试需求。

WebdriverIO

WebdriverIO 类似于 Cypress，是一个基于浏览器的替代测试运行器，也是 Vitest 的互补工具。它可以作为端到端测试工具使用，也可用于测试 Web 组件。它甚至在底层使用了 Vitest 的组件，例如用于组件测试中的模拟和桩实现。

WebdriverIO 具备与 Cypress 相同的优势，允许你在真实浏览器中测试逻辑。然而，它使用实际的 Web 标准进行自动化，克服了在 Cypress 中运行测试时的某些权衡和限制。此外，它允许你在移动设备上运行测试，使你能在更多环境中测试你的应用。

Web Test Runner

@web/test-runner 在无头浏览器中运行测试，提供与 Web 应用程序相同的执行环境，无需模拟浏览器 API 或 DOM。这也使得可以使用开发者工具在真实浏览器中调试，尽管它没有像 Cypress 测试那样提供用于单步执行测试的 UI。

要在 Vite 项目中使用 @web/test-runner，请使用 @remcovaes/web-test-runner-vite-plugin。@web/test-runner 不包含断言或模拟库，因此你需要自行添加。

uvu

uvu 是一个用于 Node.js 和浏览器的测试运行器。它在单线程中运行测试，因此测试彼此隔离度较低，可能会跨文件泄漏。然而，Vitest 使用工作线程来隔离测试并并行运行。

在代码转换方面，uvu 依赖 require 和加载器钩子。Vitest 使用 Vite，因此文件通过 Vite 插件系统的完整能力进行转换。在 Vite 已支持最常见 Web 工具链（TypeScript、JSX、大多数流行 UI 框架）的世界里，uvu 代表着复杂性的重复。如果你的应用由 Vite 驱动，维护两条不同的管道是站不住脚的。使用 Vitest，你可以将开发、构建和测试环境的配置定义为单一管道，共享相同的插件和配置。

uvu 不提供智能观察模式来重新运行更改的测试，而 Vitest 借助基于 Vite 即时热模块替换（HMR）的默认观察模式，带来了出色的开发体验。

uvu 是运行简单测试的快速选项，但对于更复杂的测试和项目，Vitest 可以更快且更可靠。

Mocha

Mocha 是一个运行在 Node.js 和浏览器中的测试框架。Mocha 是服务器端测试的流行选择。Mocha 高度可配置，默认不包含某些功能。例如，它不附带断言库，其理念是 Node 内置的断言运行器对大多数用例已足够好。另一个与 Mocha 配合流行的断言库是 Chai。

Vitest 也为一些其他功能提供了开箱即用的配置，这些功能在 Mocha 中需要额外配置或添加其他库，例如： 快照测试 TypeScript JSX 支持 代码覆盖率 模拟 智能观察模式（仅重新运行受影响的测试）

虽然 Mocha 支持原生 ESM，但它存在限制和配置约束。例如，观察模式在 ES 模块文件上不起作用。

在性能方面，Mocha 默认串行运行测试，但通过 --parallel 标志支持并行执行（尽管某些报告器和功能在并行模式下不起作用）。

如果你已经在构建管道中使用 Vite，Vitest 允许你复用相同的配置和插件进行测试，而 Mocha 则需要单独的测试设置。Vitest 提供了与 Jest 兼容的 API，同时支持 Mocha 熟悉的 describe、it 和钩子语法，使得大多数测试套件迁移变得简单。

Mocha 仍然是那些需要最小化、灵活测试运行器并完全控制其测试栈的项目的坚实选择。然而，如果你想要一个包含所有开箱即用功能的现代化测试体验——尤其是对于由 Vite 驱动的应用程序——Vitest 都能满足你的需求。

Playwright

Playwright 是微软的一个测试框架，擅长跨多个浏览器（Chromium、Firefox 和 WebKit）进行端到端测试。它控制真实浏览器来测试完整的用户工作流——从登录、导航你的应用到提交表单和验证结果。另一方面，Vitest 针对在无头环境中快速、隔离的单元和组件测试进行了优化。这些差异使其成为 Vitest 的理想互补品。

标准的设置是使用 Vitest 进行所有单元和组件测试（业务逻辑、工具函数、钩子和 UI 组件测试），并使用 Playwright 进行验证关键用户路径和跨浏览器兼容性的端到端测试。这种组合让你在开发期间通过 Vitest 获得快速反馈，同时确保你的完整应用程序在真实浏览器中通过 Playwright 正确工作。

Vitest 最近引入了浏览器模式，它在真实浏览器中运行测试。然而，存在关键的架构差异：Playwright 组件测试在 Node.js 进程中运行，并远程控制浏览器。Vitest 的浏览器模式在浏览器中本地运行测试，保持与 Vitest 测试运行器和开发体验的一致性，但它也有一些局限性。