Vue组件TDD遵循“红–绿–重构”循环：先写失败测试，再实现最小功能通过，最后清理优化；它聚焦逻辑、厘清API、规避模糊开发，并借助组合式API和轻量工具链（如Jest+VTU）提升效率与安全性。
Vue 组件测试驱动开发（TDD）不是先写代码再补测试，而是从明确行为出发：写一个失败的测试 → 实现最小功能让它通过 → 清理和优化。这个“红–绿–重构”循环，让组件逻辑更聚焦、API 更清晰，也天然规避“写了却不知道有没有用对”的模糊开发状态。
从一个按钮组件开始 TDD
比如开发 MyButton，先不写模板或逻辑，直接在 MyButton.spec.ts 中描述它该做什么：
- 应渲染出
<button>标签 - 接收
disabledprop 并正确设置原生disabled属性 - 点击时触发
click自定义事件
用 shallowMount 挂载未实现的组件，运行测试——必然报错（红阶段）。接着在 MyButton.vue 中仅添加足够通过的代码：基础模板、props 声明、@click 触发 emit。测试变绿后，再考虑样式、插槽、加载态等扩展。
组合式 API 让 TDD 更自然
Vue 3 的 setup() 和可导出的 composable 函数，把逻辑从模板中解耦出来，正好契合 TDD 的“小单元、快验证”节奏：
立即学习“前端免费学习笔记（深入）”；
- 把表单校验逻辑抽成独立函数，直接对函数做单元测试，无需挂载组件
- 使用
ref或computed管理状态，测试时只需检查响应式值的变化 - 生命周期钩子（如
onMounted）可被模拟，验证副作用是否按预期触发
工具链要轻量，但不能缺关键能力
起步推荐 Jest + Vue Test Utils（VTU）组合：
- Jest 提供断言、Mock、覆盖率报告，开箱即用
- VTU 的
mount/shallowMount支持选项式与组合式组件，trigger、emit、findComponent能精准控制测试边界 - 避免一上来就配 Vitest + Vite SSR 测试——TDD 初期重在快速反馈，不是工程完备性
别跳过“重构”这一步
测试通过只是中间状态。紧接着要审视：
- 是否有重复逻辑？能否提取为可复用的 composable？
- Props 是否过多？是否该拆分成更小的职责单元？
- 测试用例是否覆盖了边界情况（如空字符串、null、异步失败）？
有测试兜底，这些调整才真正安全。TDD 的价值，一半在红绿之间，另一半就在这一轮清醒的重构里。
