Vue Props 单元测试核心是验证属性变化引发的渲染、计算、交互及事件响应；需用 Vitest + @vue/test-utils 通过 mount 传入不同 props，检查 DOM 属性、响应式状态、条件显隐、类型校验、警告捕获、setProps 动态更新及 emit 输出。

Vue Props 的单元测试验证，核心是确认组件是否对传入的属性做出符合预期的响应——不是只看“有没有收到”，而是看“收到后是否正确渲染、计算、交互或触发事件”。Vitest + @vue/test-utils 是当前最主流、最轻量高效的组合。

用 mount 传入不同 props 值，观察 DOM 和状态变化

Props 的行为验证必须基于真实挂载。不能只检查 props 对象，要测它引发的副作用：

• 用 mount(Comp, { props: { ... } }) 显式传入目标值，比如 { disabled: true } 或 { status: 'pending' }
• 通过 wrapper.find('button').attributes('disabled') 检查 DOM 属性是否生效
• 访问 wrapper.vm.computedValue 或 wrapper.vm.$data（选项式）读取内部响应式状态
• 对 v-if/v-show 控制的元素，用 wrapper.find('.error').exists() 断言显隐逻辑

覆盖边界和异常输入，验证防御性逻辑

真实场景中，父组件可能传错类型、漏传 required prop，或传入 validator 不接受的值。测试需主动模拟这些情况：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

• 传 { count: 'abc' } 测试 Number 类型校验失败时，组件是否仍能安全渲染（如显示默认文案、不报错）
• 不传 required prop，检查控制台警告是否出现（可用 vi.spyOn(console, 'warn').mockImplementation() 捕获）
• 传 { items: null } 后调用 wrapper.vm.items?.map，确认未触发 TypeError

结合 setProps 动态更新，验证响应式更新链路

Props 变化常触发重新计算、条件渲染或 emit 行为。静态挂载不够，需测试更新过程：

立即学习“前端免费学习笔记（深入）”；

• 先挂载初始值：mount(MyInput, { props: { modelValue: '' } })
• 再调用 await wrapper.setProps({ modelValue: 'test' })（注意 await）
• 断言输入框 value 是否同步：expect(wrapper.find('input').element.value).toBe('test')
• 若该变更应触发 update:modelValue，再用 wrapper.emitted('update:modelValue') 校验

校验 emit 输出是否与 props 状态严格匹配

Props 往往决定 emit 的时机和参数。这是父子通信契约的关键验证点：

• 例如开关组件接收 modelValue，点击应 emit update:modelValue 新值
• 挂载时设 { modelValue: false }，触发 click 后检查：expect(wrapper.emitted('update:modelValue')![0]).toEqual([true])
• 若 props 含 disabled: true，再点一次应无 emit：expect(wrapper.emitted('update:modelValue')).toBeUndefined()