提升 Vue 组件可测试性的核心是设计源头降低耦合：明确 props/事件边界、抽离纯逻辑函数、避免 DOM 细节断言、为副作用提供可控入口。
让 Vue 组件更容易测试，核心不是写更多断言，而是从设计源头降低测试耦合、聚焦行为验证。可测试性高不等于代码复杂，而是组件边界清晰、依赖可控、行为可观测。
用 props 和事件定义明确的输入输出
组件应只通过 props 接收外部数据，只通过 $emit 触发语义化事件。避免在内部直接读取全局状态（如 this.$store.state 或 window.location），也不应主动调用外部函数（如 this.api.fetch）。这样测试时只需传入 props、监听事件，无需 mock 整个上下文。
- ✅ 推荐：<SearchInput @search="onSearch" :placeholder="label" />
- ❌ 避免：组件内直接 this.$http.get('/api/search') 或 this.$router.push(...)
拆分逻辑与视图，提取纯函数或组合式函数
将表单校验、格式转换、状态计算等业务逻辑移出组件选项，封装为独立函数或可导出的组合式函数（composable）。这类代码可脱离 Vue 环境直接单元测试，无需 mount、wrapper 或异步等待。
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 例如：把 date formatting 逻辑抽成 formatDate(date, pattern)，测试只需 expect(formatDate(new Date(2026, 0, 1), 'YYYY-MM')).toBe('2026-01')
- 组合式函数如 useCounter(initial) 也可单独测试其返回的 count、increment 等行为
减少对 DOM 实现细节的依赖
测试不应断言特定 class 名、元素层级或内部 ref 名。这些属于实现细节，重构时极易变动。应优先检查用户可感知的结果：文本内容、可见状态、触发的事件、跳转目标或 API 调用行为。
立即学习“前端免费学习笔记（深入）”；
- ✅ 好的断言：expect(wrapper.text()).toContain('提交成功') 或 expect(wrapper.emitted('submit')).toBeTruthy()
- ❌ 脆弱断言：expect(wrapper.find('.btn-primary').exists()).toBe(true)（改个 class 就挂）或 await wrapper.setData({ loading: true })（绕过真实交互）
为异步和副作用提供可控入口
涉及 API 请求、定时器、localStorage 等副作用的操作，不要硬编码在生命周期中。改为接收函数作为 prop（如 fetcher: () => Promise<T>），或在组合式函数中暴露可被替换的依赖项。测试时传入 mock 函数，即可精准控制响应时机与内容。
- 示例：组件接受 :loadData="mockApi"，测试中传入 jest.fn().mockResolvedValue({ items: [] })
- 避免在 onMounted 中直接调用 this.$axios.get(...)，否则需 mock 全局 axios 实例，增加测试负担
