vue组件单元测试边界是只测当前组件自身输入输出，不测子组件、外部依赖和真实dom渲染细节；应测状态渲染、用户交互、计算属性与生命周期副作用，不测子组件实现、第三方库行为、样式类名及浏览器api细节。
Vue 组件单元测试的边界，核心在于“只测当前组件，不测子组件、不测外部依赖、不测真实 DOM 渲染细节”。它不是验证整个页面是否可用，而是聚焦于组件自身的输入（props、data、events）与输出（DOM 结构、emitted 事件、计算属性、副作用逻辑）之间是否符合预期。
测试范围：什么该测，什么不该测
✅ 应该测：
-
组件状态驱动的渲染结果：比如
v-if是否根据error计算属性正确显示/隐藏错误提示 -
用户交互行为：点击按钮是否触发
emit('submit')，输入内容是否更新v-model绑定的 data 字段 - 计算属性与方法逻辑：如过滤函数是否返回正确子集，格式化方法是否按规则处理日期或数字
-
生命周期中可控的副作用：比如
created中初始化默认值，watch是否响应 prop 变更并执行预期操作
❌ 不该测：
-
子组件内部实现：用
shallowMount后，子组件被自动 stub，无需关心其是否渲染正确或是否抛错 - 第三方库行为：ECharts 实例是否成功绘图、axios 请求是否返回数据——这些应由集成或 E2E 覆盖，单元测试中需 mock
-
样式类名或 CSS 动画：除非 class 是业务逻辑开关（如
:class="{ active: isActive }"），否则不应断言has-class="fade-enter" -
浏览器原生 API 细节：如
localStorage.setItem是否真的写入磁盘，只需验证组件是否调用了它
渲染方式决定测试粒度
选择不同挂载方式，直接划清测试边界：
-
shallowMount：默认推荐。子组件被自动替换为占位标签（如<child-comp-stub></child-comp-stub>），隔离性最强，适合验证父组件逻辑与结构 -
mount：渲染完整 DOM 树，包含所有子组件。仅在需要测试父子组件协作（如插槽内容传递、事件冒泡）时使用，且应确保子组件稳定或已充分单元测试 -
render（来自 @testing-library/vue）：更贴近用户视角，强调“能否看到/交互”，弱化实现细节，适合功能导向型断言（如screen.getByText('提交')）
依赖与副作用的处理边界
外部依赖必须被控制，否则测试就不再是“单元”：
-
API 请求：用
jest.mock('@/api/user')或mockResolvedValue模拟返回，避免网络波动影响测试稳定性 -
定时器：用
jest.useFakeTimers()控制setTimeout，避免等待真实毫秒 - 全局状态（Pinia/Vuex）：创建干净的 mock store 实例传入，不复用应用中的真实 store
-
路由对象：测试中传入
mockRouter，而非依赖useRouter()返回的真实实例
边界之外：何时该退出单元测试
当以下情况出现，说明已超出单元测试职责，应转向更高层级验证：
- 需要启动本地服务器或真实浏览器才能运行
- 断言涉及多个组件协同完成一个业务流程（如“填写表单 → 点击提交 → 跳转到成功页”）
- 验证响应式布局在不同屏幕尺寸下的表现
- 检查图表像素级渲染效果或动画帧率
这些属于端到端（E2E）或视觉回归测试范畴，强行塞进单元测试会破坏速度、稳定性与可维护性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
