与其他测试运行器的比较
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,Vitest 也是一个值得考虑的选择,因为它能更快地运行单元测试,并且由于默认的 watch 模式使用 Vite 的即时热模块重载(HMR),因此可以显著提升开发者体验(DX)。Vitest 兼容大多数 Jest API 和生态系统库,因此在大多数项目中,它可以直接替代 Jest。
Cypress
Cypress 是一个基于浏览器的测试运行器,是 Vitest 的补充工具。如果你想使用 Cypress,我们建议你使用 Vitest 来处理应用程序中的所有无头(headless)逻辑,而使用 Cypress 来处理所有基于浏览器的逻辑。
Cypress 被称为端到端(E2E)测试工具,但他们 新的组件测试运行器 对测试 Vite 组件有很好的支持,是测试浏览器渲染内容的理想选择。
像 Cypress、WebdriverIO 和 Web Test Runner 这些基于浏览器的测试运行器,能够发现 Vitest 无法发现的问题,因为它们使用真实的浏览器和真实的浏览器 API。
Cypress 的测试驱动侧重于确定元素是否可见、可访问和可交互。Cypress 专为 UI 开发和测试而构建,其 DX 专注于测试驱动可视化组件。你可以看到组件和测试报告一起显示。测试完成后,组件保持交互性,你可以使用浏览器开发者工具调试发生的任何故障。
相比之下,Vitest 专注于为快速的 无头 测试提供最佳的开发者体验(DX)。像 Vitest 这样的基于 Node 的运行器支持各种部分实现的浏览器环境,例如 jsdom
。jsdom
实现了足够的功能,使你可以快速地对任何引用浏览器 API 的代码进行单元测试。但缺点是这些浏览器环境在它们可以实现的功能方面存在限制。例如,jsdom 缺少许多功能,例如 window.navigation
或布局引擎(offsetTop
等)。
最后,与 Web Test Runner 相比,Cypress 测试运行器更像 IDE,因为它还可以在浏览器中显示真实呈现的组件,以及它的测试结果和日志。
Cypress 也在不断 将 Vite 集成到他们的产品中,例如使用 Vitesse 重新构建其应用程序的 UI,并使用 Vite 来测试驱动项目开发。
我们认为 Cypress 不是单元测试无头代码的好选择,但是结合使用 Cypress(用于 E2E 和组件测试)和 Vitest(用于单元测试)能够全面覆盖应用的测试需求。
WebdriverIO
WebdriverIO 与 Cypress 类似,是一个基于浏览器的替代测试运行器,也是 Vitest 的补充工具。它可以作为端到端测试工具使用,也可以用于测试 Web Components。它甚至在底层使用了 Vitest 的一些组件,例如在组件测试中进行 模拟和桩。
WebdriverIO 具备与 Cypress 相同的优势,允许你在真实的浏览器中测试你的逻辑。但是,它使用实际的 Web 标准 进行自动化,从而克服了在 Cypress 中运行测试时的一些折衷和限制。此外,它还允许你在移动设备上运行测试,从而支持在更多环境中测试应用。
Web Test Runner
@web/test-runner 在无头浏览器中执行测试,提供与你的 Web 应用程序相同的执行环境,而无需模拟浏览器 API 或 DOM。这也使得可以在真实的浏览器中使用开发者工具进行调试,尽管没有像 Cypress 测试中那样显示用于单步执行测试的 UI。它也有 watch 模式,但不如 Vitest 智能,并且可能无法总是重新运行你期望的测试。要将 @web/test-runner 与 Vite 项目一起使用,请使用 @remcovaes/web-test-runner-vite-plugin。@web/test-runner 不包含断言或模拟库,因此你需要自己添加它们。
uvu
uvu 是一个适用于 Node.js 和浏览器的测试运行器。它在单线程中运行测试,因此测试不具备隔离性,可能会跨文件泄漏。但是,Vitest 使用 worker 线程来隔离测试并并行运行它们。对于转换你的代码,uvu 依赖于 require 和 loader hooks。Vitest 使用 Vite,因此文件会通过 Vite 插件系统的全部功能进行转换。既然 Vite 已经为最常见的 Web 工具(TypeScript、JSX、最流行的 UI 框架)提供支持,uvu 就显得有些重复。如果你的应用程序使用 Vite,那么配置和维护两套不同的流程是没有必要的。使用 Vitest,你可以将开发、构建和测试环境的配置定义为单个管道,共享相同的插件和相同的 vite.config.js。uvu 没有提供智能 watch 模式来重新运行更改的测试。而 Vitest 凭借默认的 watch 模式和 Vite 即时热模块重载(HMR),提供了出色的 DX(开发者体验)。uvu 是运行简单测试的快速选择,但对于更复杂的测试和项目,Vitest 可以更快、更可靠。