提升 Vue 单元测试覆盖率的关键在于写对测试：聚焦高价值业务组件、用 shallowMount 隔离验证、覆盖边界异常路径、将覆盖率纳入 CI 和 pre-commit 流程。
提升 Vue 项目单元测试覆盖率，关键不在“写更多测试”，而在于“写对测试”——聚焦高价值路径、避开无效覆盖、让每次测试都真实拦截风险。
从核心业务组件切入
优先覆盖直接影响数据流、权限控制或用户关键操作的组件，比如登录表单、订单提交弹窗、角色分配表格。这些地方一旦出错，后果直接可见。避免一上来就测图标按钮或空状态提示这类低风险展示组件。
- 识别方式：看路由配置里哪些页面承载主业务逻辑，再顺藤摸到对应组件
- 验证标准：不只是渲染正确，更要测 prop 变化触发的副作用（如接口调用、状态更新）、用户交互后的响应（点击按钮是否发请求、输入是否校验）
- 示例：用户管理列表页，重点测“搜索提交后是否正确调用 searchUser API”“勾选多行后批量删除按钮是否启用”
用浅渲染 + 精准模拟代替全量挂载
mount 整个组件树会拖慢速度、掩盖问题。shallowMount 能快速隔离被测组件，配合 jest.mock 或 vi.mock 模拟子组件和依赖，让测试真正聚焦自身逻辑。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 对第三方组件（如 Element Plus 的 ElTable、Vuetify 的 VDataTable）一律 mock，不测它们的行为，只验证你传给它们的 props 是否符合预期
- 对内部方法或组合式函数（如 useApi、useForm）单独抽离测试，不耦合在组件测试里
- 避免“渲染即通过”：expect(wrapper.exists()).toBe(true) 这类断言意义极小，应检查具体 DOM 结构、事件绑定、props 透传结果
覆盖边界与异常路径，不止 happy path
60% → 85% 的跃升，往往来自补全那些“平时不走但出事很疼”的分支：空数据、接口报错、权限不足、输入超长、网络中断模拟。
立即学习“前端免费学习笔记（深入）”；
- 对 async 函数，必须写 catch 分支的测试，比如 login() 失败时是否显示错误提示、是否重置 loading 状态
- 对 computed 或 watch，验证其在边界值下的输出（如数组为空时 computed list 是否返回 []，watch 监听的 ref 从 null 变为对象时是否触发正确逻辑）
- 用 vi.useFakeTimers() 测试节流、防抖、定时轮询等时间敏感逻辑，不用真实等待
把覆盖率变成开发流程的一部分
不靠人工检查，而是让工具自动守门。在 CI 中配置最低覆盖率阈值（如 lines: 75%, branches: 65%），低于则构建失败；本地 pre-commit 钩子运行 --coverage 快速反馈。
- 排除干扰项：在 vitest.config.ts 或 jest.config.js 的 collectCoverageFrom 中剔除 router/index.ts、main.ts、类型声明文件等非业务代码
- 关注报告里的 “Uncovered line” 具体位置，而不是总百分比数字——某一行没覆盖，可能暴露一个未处理的 if 分支或未 catch 的 promise
- 定期清理“伪覆盖”：删掉长期注释掉、从未执行过的测试用例，或只调用 mount 但没做任何 expect 的“占位测试”
