标准答案
- 单元测试适合工具函数、状态转换、请求参数构造、composable 和边界条件清晰的业务逻辑。
- 组件测试适合验证 props 输入、emits 输出、slot 渲染、表单交互、条件展示和可访问状态。
- E2E 测试适合登录、下单、支付、审批、搜索、筛选、导出等跨页面关键流程。
- 测试金字塔不代表 E2E 越少越好，而是要把不同风险放到成本合适的测试层。
- Mock 要有边界：单元和组件测试可以 mock 请求，E2E 更应接近真实用户路径和后端契约。
题目解析
这道题可以用“测什么、在哪一层测、为什么”回答。
Vue 组件测试不要只断言快照。更有价值的是用户能否看到正确内容、点击后是否 emit、错误态是否展示。
E2E 成本高但价值也高，应该覆盖最容易造成业务损失的路径，而不是覆盖所有按钮。
代码示例
下面是一个组件测试的简化例子：验证点击后是否发出事件。
TypeScript
it('emits submit event when user clicks submit', async () => {
const wrapper = mount(UserForm, {
props: {
modelValue: { name: 'Ada' }
}
})
await wrapper.get('button[type="submit"]').trigger('click')
expect(wrapper.emitted('submit')).toHaveLength(1)
})常见误区
- 只写快照测试，组件行为变化了也看不出真实风险。
- 所有场景都堆到 E2E，导致测试慢、脆弱且难定位失败原因。
- 测试只覆盖成功路径，没有覆盖 loading、error、empty 和权限态。