【Vu3 测试篇】自动化测试

一、为什么需要测试

自动化测试能够预防无意引入的 bug，并鼓励开发者将应用分解为可测试、可维护的函数、模块、类和组件。这能够帮助你和你的团队更快速、自信地构建复杂的 Vue 应用。与任何应用一样，新的 Vue 应用可能会以多种方式崩溃，因此，在发布前发现并解决这些问题就变得十分重要。
测试进行的越早越好：拖得越久，应用就会有越多的依赖和复杂性，想要开始添加测试也就越困难。

二、测试策略

• 单元测试：检查给定函数、类或组合式函数的输入是否产生预期的输出或副作用。
• 组件测试：检查你的组件是否正常挂载和渲染、是否可以与之互动，以及表现是否符合预期。这些测试比单元测试导入了更多的代码，更复杂，需要更多时间来执行。
• 端到端测试：检查跨越多个页面的功能，并对生产构建的 Vue 应用进行实际的网络请求。这些测试通常涉及到建立一个数据库或其他后端。

三、单元测试

3.1 基础演示

编写单元测试是为了验证小的、独立的代码单元是否按预期工作。一个单元测试通常覆盖一个单个函数、类、组合式函数或模块。单元测试侧重于逻辑上的正确性，只关注应用整体功能的一小部分。他们可能会模拟你的应用环境的很大一部分（如初始状态、复杂的类、第三方模块和网络请求）。
一般来说，单元测试将捕获函数的业务逻辑和逻辑正确性的问题。
如下，对纯 JavaScript/TypeScript 模块中的函数进行断言，看其是否返回期望的值。

// helpers.js
export function increment (current, max = 10) {if (current < max) {return current + 1}return current
}

如果下面任何一条断言失败了，那么问题一定是出在 increment 函数上。

// helpers.spec.js
import { increment } from './helpers'describe('increment', () => {test('increments the current number by 1', () => {expect(increment(0, 10)).toBe(1)})test('does not increment the current number over the max', () => {expect(increment(10, 10)).toBe(10)})test('has a default max of 10', () => {expect(increment(10)).toBe(10)})
})

注：单元测试不涉及 UI 渲染、网络请求或其他环境问题。

3.2 白盒与黑盒

一个组件可以通过两种方式测试：

• 白盒：单元测试
  白盒测试知晓一个组件的实现细节和依赖关系。它们更专注于将组件进行更 独立 的测试。这些测试通常会涉及到模拟一些组件的部分子组件，以及设置插件的状态和依赖性（例如 Vuex）。
• 黑盒：组件测试
  黑盒测试不知晓一个组件的实现细节。这些测试尽可能少地模拟，以测试组件在整个系统中的集成情况。它们通常会渲染所有子组件，因而会被认为更像一种“集成测试”。

3.3 测试框架推荐

1. Vitest 是一个针对此目标设计的单元测试框架，它由 Vue / Vite 团队成员开发和维护。在 Vite 的项目集成它会非常简单，而且速度非常快。
2. Peeky 是另一速度极快的单元测试运行器，对 Vite 集成提供第一优先级支持。它也是由 Vue 核心团队成员创建的，并提供了一个基于图形用户界面（GUI）的测试界面。
3. Jest 是一个广受欢迎的单元测试框架，并可通过 vite-jest 这个包在 Vite 中使用。不过，我们只推荐你在已有一套 Jest 测试配置、且需要迁移到基于 Vite 的项目时使用它，因为 Vitest 提供了更无缝的集成和更好的性能。

四、组件测试

五、端到端（E2E）测试