Close
升级到 Vue 3 | Vue 2 EOL

指南

测试

介绍

在构建可靠的应用程序时，测试在个人或团队构建新功能、重构代码、修复错误等方面起着至关重要的作用。虽然测试有很多学派，但在 Web 应用程序的背景下，通常会讨论三个类别

本节旨在为导航测试生态系统并为您的 Vue 应用程序或组件库选择合适的工具提供指导。

单元测试

介绍

单元测试允许您隔离测试代码的各个单元。单元测试的目的是让开发人员对他们的代码充满信心。通过编写全面、有意义的测试，您可以获得信心，即随着新功能的构建或代码的重构，您的应用程序将保持功能性和稳定性。

单元测试 Vue 应用程序与测试其他类型的应用程序并没有显著区别。

选择您的框架

由于单元测试建议通常与框架无关，因此在评估哪个单元测试工具最适合您的应用程序时，请牢记以下一些基本准则。

一流的错误报告

当测试失败时，您的单元测试框架提供有用的错误至关重要。这是断言库的工作。具有高质量错误消息的断言有助于最大限度地减少调试问题所需的时间。除了简单地告诉您哪个测试失败之外，断言库还提供测试失败原因的上下文，例如，预期结果与实际结果的对比。

一些单元测试框架，如 Jest，包含断言库。其他框架，如 Mocha，要求您单独安装断言库（通常是 Chai）。

活跃的社区和团队

由于大多数单元测试框架都是开源的，因此对于一些将长期维护测试的团队来说，拥有一个活跃的社区至关重要，并且需要确保项目将得到积极维护。此外，拥有一个活跃的社区的好处是在遇到问题时可以提供更多支持。

框架

虽然生态系统中有很多工具，但以下是一些在 Vue.js 生态系统中常用的单元测试工具。

Jest

Jest 是一个 JavaScript 测试框架，专注于简单性。它的一项独特功能是能够对测试进行快照，以提供一种验证应用程序单元的替代方法。

资源

Mocha

Mocha 是一个 JavaScript 测试框架，专注于灵活。由于这种灵活性，它允许您选择不同的库来满足其他常见功能，例如间谍（例如，Sinon）和断言（例如，Chai）。Mocha 的另一个独特功能是它除了 Node.js 之外，还可以执行浏览器中的测试。

资源

组件测试

介绍

要测试大多数 Vue 组件，它们必须被挂载到 DOM（虚拟或真实）上，以便完全断言它们正在工作。这是另一个与框架无关的概念。因此，创建了组件测试框架，让用户能够可靠地执行此操作，同时还提供 Vue 特定的便利，例如对 Vuex、Vue Router 和其他 Vue 插件的集成。

选择您的框架

以下部分提供了在评估哪个组件测试框架最适合您的应用程序时需要牢记的一些准则。

与 Vue 生态系统的最佳兼容性

毫无疑问，组件测试库应该具备的首要标准之一是尽可能与 Vue 生态系统兼容。虽然这似乎很全面，但需要牢记的一些关键集成领域包括单文件组件 (SFC)、Vuex、Vue Router 以及您的应用程序依赖的任何其他 Vue 特定插件。

一流的错误报告

当测试失败时，您的组件测试框架提供有用的错误日志至关重要，这些日志有助于最大限度地减少调试问题所需的时间。除了简单地告诉您哪个测试失败之外，它们还应该提供测试失败原因的上下文，例如，预期结果与实际结果的对比。

推荐

Vue 测试库 (@testing-library/vue)

Vue 测试库是一组工具，专注于测试组件，而不依赖于实现细节。它以可访问性为指导原则，其方法也使重构变得轻而易举。

它的指导原则是，测试越像软件的使用方式，它们提供的信心就越大。

资源

Vue 测试工具

Vue 测试工具是官方的低级组件测试库，它旨在为用户提供对 Vue 特定 API 的访问权限。如果您是 Vue 应用程序测试的新手，我们建议您使用 Vue 测试库，它是 Vue 测试工具的抽象。

资源

端到端 (E2E) 测试

介绍

虽然单元测试为开发人员提供了一定程度的信心，但单元测试和组件测试在提供应用程序部署到生产环境后的整体覆盖范围方面是有限的。因此，端到端 (E2E) 测试提供了对应用程序最重要的方面（即用户实际使用应用程序时会发生什么）的覆盖范围。

换句话说，E2E 测试验证了应用程序中的所有层。这不仅包括您的前端代码，还包括所有相关的后端服务和基础设施，这些基础设施更能代表用户所处的环境。通过测试用户操作对应用程序的影响，E2E 测试通常是判断应用程序是否正常运行的关键。

选择您的框架

虽然 Web 上的端到端 (E2E) 测试因不可靠（不稳定）的测试和减慢开发过程而声名狼藉，但现代 E2E 工具已经取得了进步，创造了更可靠、更具交互性和更有用的测试。在选择 E2E 测试框架时，以下部分提供了一些关于在为您的应用程序选择测试框架时需要注意的事项的指导。

跨浏览器测试

端到端 (E2E) 测试的主要优势之一是它能够跨多个浏览器测试您的应用程序。虽然拥有 100% 的跨浏览器覆盖率似乎很理想，但重要的是要注意，由于持续运行它们所需的额外时间和机器能力，跨浏览器测试对团队资源的回报递减。因此，在选择应用程序所需的跨浏览器测试量时，务必注意这种权衡。

E2E 中用于捕获浏览器特定问题的最新发展是使用应用程序监控和错误报告工具（例如 Sentry、LogRocket 等）来处理不太常用的浏览器（例如 < IE11、旧版 Safari 版本等）。

更快的反馈循环

端到端 (E2E) 测试和开发的主要问题之一是运行整个套件需要很长时间。通常，这仅在持续集成和部署 (CI/CD) 管道中完成。现代 E2E 测试框架通过添加并行化等功能来帮助解决这个问题，这使得 CI/CD 管道通常比以前快得多。此外，在本地开发时，能够选择性地为正在处理的页面运行单个测试，同时提供测试的热重载，可以帮助提高开发人员的工作流程和生产力。

一流的调试体验

虽然开发人员传统上依赖于扫描终端窗口中的日志来帮助确定测试中出了什么问题，但现代端到端 (E2E) 测试框架允许开发人员利用他们已经熟悉的工具，例如浏览器开发人员工具。

无头模式下的可见性

当端到端 (E2E) 测试在持续集成/部署管道中运行时，它们通常在无头浏览器中运行（即，没有可见的浏览器供用户观看）。因此，当发生错误时，现代 E2E 测试框架提供的一流支持的关键功能是能够在各种测试阶段查看应用程序的快照和/或视频，以便深入了解错误发生的原因。从历史上看，维护这些集成很繁琐。

建议

虽然生态系统中有很多工具，但以下是一些在 Vue.js 生态系统中使用的常见端到端 (E2E) 测试框架。

Cypress.io

Cypress.io 是一个测试框架，旨在通过使开发人员能够可靠地测试他们的应用程序，同时提供一流的开发人员体验来提高开发人员的生产力。

资源

Nightwatch.js

Nightwatch.js 是一个端到端测试框架，可用于测试 Web 应用程序和网站，以及 Node.js 单元和集成测试。

资源

Puppeteer

Puppeteer 是一个 Node 库，它提供了一个高级 API 来控制浏览器，并且可以与其他测试运行器（例如 Jest）配对以测试您的应用程序。

资源

TestCafe

TestCafe 是一个基于 Node.js 的端到端框架，旨在提供简单的设置，以便开发人员可以专注于创建易于编写且可靠的测试。

资源

← 单文件组件 TypeScript 支持 →
发现错误或想为文档做出贡献？ 在 GitHub 上编辑！ 部署在 Netlify 上。