Vue 教程：使用 Vite 与 Vitest 搭建测试驱动的组件开发工作流

快速概述

测试驱动开发（TDD）强调先编写失败测试再实现功能，能显著提升组件质量与可维护性。在 Vue 生态中，Vite 提供极速冷启动与热更新，Vitest 则原生集成 Vite 配置，让单元测试无需额外构建步骤。本教程面向熟悉命令行与 Node.js 的开发者，前置环境要求为已安装 ^20.19.0 || >=22.12.0 版本的 Node.js。

核心概念与原理

Vue 最核心的两个功能是数据驱动和组件化，组件化开发带来更快的开发效率与更好的可维护性。TDD 工作流遵循“红-绿-重构”循环：先编写描述预期行为的测试（红），再实现最小代码使其通过（绿），最后优化代码结构。Vitest 利用 Vite 的转换管道，支持对单文件组件（SFC）直接导入与测试，无需 Webpack 或 Jest 的复杂配置。

实战步骤与代码

第一步：创建项目

使用 Vue 官方脚手架 create-vue，在命令行运行以下命令（不要带上 $ 符号）：

npm create vue@latest

在交互提示中，务必选择 Add Vitest for Unit testing? 为 Yes，其余选项按需选择。

第二步：编写第一个测试

在 src/components/__tests__/ 目录下创建 Counter.spec.js：

import { mount } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
import Counter from '../Counter.vue'
describe('Counter', () => { it('renders initial count', () => { const wrapper = mount(Counter) expect(wrapper.text()).toContain('0') }) })

第三步：运行测试

在 package.json 中确认 test 脚本已配置，然后运行：

npm run test

此时测试应失败（红），因为 Counter.vue 尚未实现。

第四步：实现组件

创建 Counter.vue 使测试通过：

<template>
  <button @click="count++">{{ count }}</button>
</template>
<script setup> import { ref } from 'vue' const count = ref(0) </script>

再次运行测试，应全部通过（绿）。

常见坑点与优化

• Node 版本过低：create-vue 要求 Node.js ^20.19.0 || >=22.12.0，版本不足会导致安装失败。
• 测试环境未配置：确保 vitest.config.js 中正确设置 environment: 'jsdom'，否则无法挂载组件。
• 优化建议：对纯函数逻辑使用 describe/it 分组，对组件交互使用 @vue/test-utils 的 trigger 方法模拟事件，保持测试粒度小而专注。