Vue组件单元测试边界指明该测、不该测、必须隔离和需要模拟的内容：该测响应式状态、用户交互、条件渲染及可断言的生命周期副作用；不该测Vue内部机制、原生DOM行为、第三方库细节及纯样式；必须隔离API、全局状态、定时器和路由；需要模拟表单输入、联动交互、键盘操作及父子通信链路。
Vue 组件单元测试的边界，不是指“测到哪里为止”，而是指哪些该测、哪些不该测、哪些必须隔离、哪些需要模拟。划清这个边界，才能让测试既有效又不脆弱。
该测：组件自身可验证的行为逻辑
聚焦组件内部可控、可观察、有明确输入输出的部分：
- 响应式状态变化：比如 `count` 变化后，是否触发 `showMessage = true`；`username` 输入后，`error` 计算属性是否按规则返回字符串或空值
- 用户交互结果：点击按钮是否 emit `click` 事件、是否调用 `increment()` 方法、是否更新 `data` 中的字段
- 条件渲染与模板分支：`v-if="showMessage"` 是否真实控制 DOM 存在；不同 `props` 值（如 `disabled: true`）是否正确影响样式类或事件绑定
- 生命周期中可断言的副作用：`onMounted` 中是否设置了定时器（可通过 `jest.useFakeTimers()` 捕获）、是否调用了 `fetchData()` 并正确处理了响应
不该测：外部系统与不可控实现细节
避免把测试变成对框架、浏览器或第三方库的验证：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- Vue 内部机制：不必验证 `ref()` 是否真的响应式、`v-model` 是否自动同步 input 值——这是 Vue 的责任，不是你的组件逻辑
- 原生 DOM API 行为：不测 `element.focus()` 是否真让元素获得焦点，而应测“调用 `focus()` 方法后，组件是否设置了 `focused: true`”
- 第三方 UI 库渲染结果：若使用 Arco 或 Element Plus 的子组件，不验证其内部 class 或结构，只验证你传给它的 `props` 是否正确传递、事件是否被监听
- 纯样式表现：不测 `class="btn-primary"` 是否对应某套 CSS 规则，除非该 class 是你通过逻辑动态添加且有业务含义（如权限态）
必须隔离：依赖与副作用
让测试稳定、快速、可重复的关键是切断外部干扰：
立即学习“前端免费学习笔记（深入）”；
- API 调用：用 `jest.mock()` 或 `vi.mock()` 拦截 `axios.get`，返回固定 mock 数据，不发真实请求
- 全局状态（Pinia/Vuex）：测试组件时，不连接真实 store，而是传入一个精简的 mock store 实例，只暴露它需要的 state 和 actions
- 定时器与异步任务：启用 `jest.useFakeTimers()` 后，用 `jest.runAllTimers()` 主动推进，避免等待真实时间
- Router / Route 对象：不依赖真实路由实例，用 `createRouter({ routes: [] })` 创建轻量 mock，或直接传入 `{ params: { id: '123' } }` 作为 props
需要模拟：用户视角的真实交互链路
测试不是检查代码怎么写，而是验证用户操作后是否得到预期反馈：
- 表单输入流程：`wrapper.find('input').setValue('abc') → expect(wrapper.vm.username).toBe('abc') → expect(wrapper.find('.error').exists()).toBe(true)`
- 下拉选择联动：选中省份 → 触发 `@change` → 组件内部调用 `fetchCities()` → 展示城市列表（此时已 mock 接口）
- 键盘操作：`wrapper.find('input').trigger('keydown.enter')` 验证是否触发搜索，而非只测 `@keyup.enter` 是否绑定
- 组合组件通信：父组件传 `v-model:visible`，子组件 emit `update:visible`，测试两者是否形成闭环，而不是深入子组件内部看 emit 被谁接收
