学习 Vue

第 11 章 测试 在 Vue 中进行测试

本作品已使用人工智能进行翻译。欢迎您提供反馈和意见：[e-mail]

至此，我们已经了解了如何使用不同的 Vue API 从零开始开发一个完整的 Vue 应用程序。我们的应用程序现在可以部署了，但在部署之前，我们需要确保我们的应用程序没有错误，可以投入生产。这就是测试的作用。

测试对于任何应用程序的开发都至关重要，因为它有助于在将代码发布到生产环境之前提高代码的可信度和质量。在本章中，我们将了解不同类型的测试以及如何在 Vue 应用程序中使用它们。我们还将探索各种工具，如用于单元测试的 Vitest 和 Vue Test Utils，以及用于端到端（E2E）测试的 PlaywrightJS。

单元测试和 E2E 测试简介

软件开发有手动和自动测试两种做法和技术，以确保应用程序按预期运行。手动测试需要测试人员与软件进行手动交互，成本可能很高，而自动测试主要是以自动化方式执行预先定义的测试脚本，其中包含一组测试。自动测试集合可以验证从简单到更复杂的应用场景，从单一功能到不同部分的组合 。

自动测试比人工测试更可靠、更具可扩展性，前提是我们正确编写测试，并执行以下测试流程：

单元测试

软件开发中最常见、最低级的测试。我们使用单元测试来验证执行特定操作的代码单元（或代码块），如函数、钩子和模块。我们可以将单元测试与测试驱动开发（TDD）结合起来，作为一种标准的开发实践 。¹作为一种标准开发实践 。

整合测试

这种测试类型验证不同单元代码块的整合。集成测试旨在确认逻辑功能、组件或模块的流程。组件测试将测试与其内部逻辑整合为一个单元测试。我们还模拟大多数上游服务和测试范围之外的其他功能，以确保测试质量 。

端到端（E2E）测试

软件开发中最高级别的测试。我们使用 E2E 测试来验证从客户端到后台的整个应用程序流程，通常是通过模拟实际用户行为。在 E2E 测试中，不会有任何模拟服务或函数，因为我们要测试整个应用程序流 。

备注

测试驱动开发（TDD）是指首先设计并编写测试用例（红色阶段），然后修改代码以通过测试（绿色阶段），最后改进代码实现（重构阶段）。这有助于在实际开发之前验证逻辑和设计。

如图 11-1 所示，这三种测试类型构成了一个测试金字塔，其中的重点应主要放在单元测试上，然后是集成测试，E2E 测试的数量最少，因为它主要是为了确保合理性，而且触发成本可能很高。由于我们是通过任意组件、服务和模块创建应用程序的，因此对每个孤立的功能或特性进行单元测试就足以保证代码库的质量，而且成本和工作量都是最低的 。

作为应用程序测试系统的主要基础，我们首先使用 Vitest 进行单元测试。

图 11-1. 测试金字塔

作为单元测试工具的 Vitest

Vitest是基于 Vite 的单元测试运行程序，适用于 Vite 驱动的项目。其 API 与 Jest 和 Chai 相似，但提供了更模块化的测试方法。Vitest 注重速度和开发者体验，提供了多项重要功能，包括多线程工作者、TypeScript 和 JSX 支持，以及针对 Vue 和 React 等框架的组件测试 。

要使用 Vitest，我们需要在项目 中将其安装为开发依赖项：

yarn add