一、为什么需要测试
自动化测试能够预防无意引入的 bug,并鼓励开发者将应用分解为可测试、可维护的函数、模块、类和组件。这能够帮助你和你的团队更快速、自信地构建复杂的 Vue 应用。与任何应用一样,新的 Vue 应用可能会以多种方式崩溃,因此,在发布前发现并解决这些问题就变得十分重要。
在本篇指引中,我们将介绍一些基本术语,并就你的 Vue 3 应用应选择哪些工具提供一些建议。
还有一个特定用于 Vue 的小节,介绍了组合式函数的测试,详情请参阅测试组合式函数。
二、何时测试
越早越好!我们建议你尽快开始编写测试。拖得越久,应用就会有越多的依赖和复杂性,想要开始添加测试也就越困难。
三、测试的类型
当设计你的 Vue 应用的测试策略时,你应该利用以下几种测试类型:
- 单元测试:检查给定函数、类或组合式函数的输入是否产生预期的输出或副作用。
- 组件测试:检查你的组件是否正常挂载和渲染、是否可以与之互动,以及表现是否符合预期。这些测试比单元测试导入了更多的代码,更复杂,需要更多时间来执行。
- 端到端测试:检查跨越多个页面的功能,并对生产构建的 Vue 应用进行实际的网络请求。这些测试通常涉及到建立一个数据库或其他后端。
每种测试类型在你的应用的测试策略中都发挥着作用,保护你免受不同类型的问题的影响。
四、总览
我们将简要地讨论这些测试是什么,以及如何在 Vue 应用中实现它们,并提供一些普适性建议。
五、单元测试
编写单元测试是为了验证小的、独立的代码单元是否按预期工作。一个单元测试通常覆盖一个单个函数、类、组合式函数或模块。单元测试侧重于逻辑上的正确性,只关注应用整体功能的一小部分。他们可能会模拟你的应用环境的很大一部分(如初始状态、复杂的类、第三方模块和网络请求)。
一般来说,单元测试将捕获函数的业务逻辑和逻辑正确性的问题。
以这个 increment 函数为例:
// helpers.js
export function increment (current, max = 10) {
if (current < max) {
return current + 1
}
return current
}
因为它很独立,可以很容易地调用 increment 函数并断言它是否返回了所期望的内容,所以我们将编写一个单元测试。
如果任何一条断言失败了,那么问题一定是出在 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 渲染、网络请求或其他环境问题。
这些通常是与 Vue 无关的纯 JavaScript/TypeScript 模块。一般来说,在 Vue 应用中为业务逻辑编写单元测试与使用其他框架的应用没有明显区别。
但有两种情况,你必须对 Vue 的特定功能进行单元测试:
1、组合式函数
2、组件
一、组合式函数
有一类 Vue 应用中特有的函数被称为 组合式函数,在测试过程中可能需要特殊处理。 你可以跳转到下方查看 测试组合式函数 了解更多细节。
二、组件的单元测试
一个组件可以通过两种方式测试:
1、白盒:单元测试
白盒测试知晓一个组件的实现细节和依赖关系。它们更专注于将组件进行更 独立 的测试。这些测试通常会涉及到模拟一些组件的部分子组件,以及设置插件的状态和依赖性(例如 Pinia)。
2、黑盒:组件测试
黑盒测试不知晓一个组件的实现细节。这些测试尽可能少地模拟,以测试组件在整个系统中的集成情况。它们通常会渲染所有子组件,因而会被认为更像一种“集成测试”。请查看下方的组件测试建议作进一步了解。
三、推荐方案
- Vitest
因为由 create-vue 创建的官方项目配置是基于 Vite 的,所以我们推荐你使用一个可以利用同一套 Vite 配置和转换管道的单元测试框架。Vitest 正是一个针对此目标设计的单元测试框架,它由 Vue / Vite 团队成员开发和维护。在 Vite 的项目集成它会非常简单,而且速度非常快。
四、其他选择
- Jest 是一个广受欢迎的单元测试框架。不过,我们只推荐你在已有一套 Jest 测试配置、且需要迁移到基于 Vite 的项目时使用它,因为 Vitest 提供了更无缝的集成和更好的性能。
六、组件测试
七、端到端(E2E)测试
八、用例指南
(完)