Vue 3自定义表单组件单元测试核心是验证props渲染、用户交互触发事件、校验逻辑执行及API依赖模拟；重点测用户可见行为与反馈，而非内部方法。
Vue 3 中自定义表单组件的单元测试核心在于：验证 props 输入是否正确影响渲染、用户交互是否触发预期事件、校验逻辑是否按规则执行，以及外部依赖（如 API 调用）能否被安全模拟。关键不是测内部方法，而是测“用户看到什么、做了什么、得到什么反馈”。
基础渲染与 props 验证
确保组件接收 props 后能正确显示初始状态和占位符等信息。这是最基础也是最容易遗漏的一环。
- 使用 mount 挂载组件，并传入典型 props（如
label、placeholder、disabled） - 检查 input 元素是否存在、属性是否匹配：
expect(wrapper.find('input').attributes('placeholder')).toBe('请输入邮箱') - 若组件支持 label 渲染，验证对应文本节点是否包含预期文字
用户输入与事件触发
表单组件的核心是响应用户操作。测试重点是输入值变更是否正确 emit 事件，且数据流可追踪。
- 调用
wrapper.find('input').setValue('test@example.com')模拟输入 - 使用
await wrapper.vm.$nextTick()或直接 await setValue（Vitest + @vue/test-utils v2.4+ 自动等待）保证响应式更新完成 - 断言是否触发了
update:modelValue或自定义事件（如input、change），并检查参数值：expect(wrapper.emitted('update:modelValue')![0]).toEqual(['test@example.com'])
校验逻辑与错误提示
自定义校验通常通过 v-model + rules prop 实现，或内建简单规则（如必填、长度）。测试需覆盖“有效”与“无效”两种场景。
立即学习“前端免费学习笔记（深入）”；
- 先设置一个违规值（如空字符串、过短密码），再调用组件暴露的
validate方法（如果提供）或触发 blur 事件 - 检查错误提示 DOM 是否出现：
expect(wrapper.find('.form-error').exists()).toBe(true) - 若组件返回 Promise（如 async 校验），用
await expect(wrapper.vm.validate()).resolves.toBe(true)断言 - 避免直接断言内部 data（如
errorMessage），优先观察 DOM 输出或 emitted 事件
API 调用与外部依赖模拟
当表单提交触发请求（如登录、注册），必须隔离网络层，防止测试不稳定或污染环境。
- 用
vi.mock或vi.fn()替换 axios 或封装的 API 函数，例如：const mockLogin = vi.fn().mockResolvedValue({ success: true }) - 在挂载时通过 provide 或 props 注入 mock 方法，或在 setup 中替换已导入的模块（需配合
vi.hoist和vi.resetModules） - 提交后断言 mock 是否被调用，且参数符合预期：
expect(mockLogin).toHaveBeenCalledWith({ account: 'admin', password: '123' }) - 测试失败路径：mock 返回 reject，验证错误提示是否正确显示
