Vue 教程：测试驱动开发——使用 Vitest 编写单元测试与组件测试

快速概述

Vue 是一个渐进式 JavaScript 框架，专注于构建用户界面，其核心库只关注视图层，因此非常适合与测试工具链集成。在 Vue 项目中，测试驱动开发（TDD）能够显著提升代码质量与可维护性。Vitest 是 Vue 官方脚手架 create-vue 推荐的单元测试方案，它基于 Vite 构建，提供极速的测试运行体验。本教程适用于希望为 Vue 单页应用或组件库引入自动化测试的开发者，前置环境要求包括：熟悉命令行，并已安装 Node.js 版本 ^20.19.0 或 >=22.12.0。

核心概念与原理

测试驱动开发的核心循环是“红-绿-重构”：先编写失败的测试，再实现最小代码使其通过，最后优化代码结构。在 Vue 中，单元测试关注组件或函数的独立行为，组件测试则验证组件渲染、交互与状态变化。Vitest 利用 Vite 的模块转换能力，无需额外配置即可支持 Vue 单文件组件（SFC）和 TypeScript。其工作原理是：测试文件通过 import 引入被测模块，Vitest 在内存中编译并执行，提供断言、模拟（mock）和覆盖率等能力。

实战步骤与代码

步骤 1：创建带测试支持的 Vue 项目

使用 Vue 官方脚手架 create-vue 创建项目，在提示中选择 Vitest 作为单元测试方案：

npm create vue@latest
在交互提示中：
✔ Add Vitest for Unit testing? … Yes

步骤 2：编写第一个单元测试

在 src/components/__tests__/ 目录下创建测试文件，使用 TDD 方式先写断言：

// src/utils/format.js
export function formatPrice(price) {
  return `¥${price.toFixed(2)}`;
}
// src/utils/__tests__/format.spec.js import { describe, it, expect } from 'vitest'; import { formatPrice } from '../format';
describe('formatPrice', () => { it('格式化价格保留两位小数', () => { expect(formatPrice(9.5)).toBe('¥9.50'); }); }); 

运行测试：npm run test:unit。

步骤 3：编写组件测试

使用 @vue/test-utils 挂载组件并断言渲染结果：

// src/components/Counter.vue
<template>
  <button @click="increment">{{ count }}</button>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
function increment() { count.value++; }
</script>
// src/components/__tests__/Counter.spec.js import { mount } from '@vue/test-utils'; import Counter from '../Counter.vue';
describe('Counter', () => { it('点击按钮后计数增加', async () => { const wrapper = mount(Counter); await wrapper.find('button').trigger('click'); expect(wrapper.text()).toContain('1'); }); }); 

常见坑点与优化

• Node 版本过低：Vitest 依赖较新的 Node.js，请确保版本符合要求，否则会报错。
• 异步更新：组件测试中触发事件后需使用 await 等待 DOM 更新，否则断言可能失败。
• 模拟外部依赖：使用 vi.mock 模拟 API 调用或第三方库，避免测试受网络影响。
• 性能优化：将测试文件放在 __tests__ 目录，利用 Vitest 的 watch 模式只运行变更相关的测试。

通过以上步骤，你可以在 Vue 项目中顺利实施 TDD，提升代码质量与开发效率。