前端组件测试中Mock父组件事件触发的核心是手动构造事件发射环境，通过mount传入jest.fn()函数模拟v-on绑定的回调，并用wrapper.emitted()或props函数验证子组件是否正确调用emit或触发事件。
在前端组件测试中，Mock 父组件事件触发的核心思路是：**不依赖真实父组件，而是手动构造事件发射环境，让子组件能接收并响应 `emit` 或 `props` 传入的函数**。Vue 测试中（尤其 Vue 3 + `<script setup>`），重点在于模拟父组件通过 `v-on` 绑定的事件回调，以及验证子组件是否正确调用了这些回调。</script>
用 mount 配置 props 函数实现事件监听模拟
子组件通常通过 `defineEmits` 声明事件，而父组件用 `@xxx="handler"` 监听。测试时，我们反向操作——把一个 jest mock 函数作为 prop 传入，代替父组件的 handler：
- 在 `mount()` 选项中，通过 `props` 传入一个已 `jest.fn()` 的函数，对应子组件 emit 的事件名（如 `'send'`）
- 触发子组件内部动作（如点击按钮），检查该 mock 函数是否被调用、调用次数、参数是否正确
示例（基于你提供的代码）：
// 测试 addTodo 按钮是否正确 emit 'send'
const wrapper = mount(YourComponent, {
props: {
msg: '1234',
onSend: jest.fn() // 注意命名要匹配 v-on:send="..." 的写法
}
})
await wrapper.find('.add-todo').trigger('click')
expect(wrapper.vm.$props.onSend).toHaveBeenCalledWith('todo内容')
处理 defineEmits + $emit 场景（推荐 Vue Test Utils 4+）
若子组件使用 `const emit = defineEmits(['send'])` 并显式调用 `emit('send', value)`，测试中无需 mock emit 本身（VTU 自动提供），只需验证它是否被调用：
- 直接访问 `wrapper.emitted()` 获取所有已触发事件的历史记录
- `wrapper.emitted().send` 返回数组，每个元素是某次调用的参数列表
- 配合 `await flushPromises()` 或 `await nextTick()` 处理异步 emit
例如：
await wrapper.find('.add-todo').trigger('click')
await nextTick()
expect(wrapper.emitted().send).toHaveLength(1)
expect(wrapper.emitted().send[0]).toEqual(['新 todo'])
模拟父组件的响应式 props 变更触发子组件更新
有些子组件行为依赖父组件传入的 props 变化（比如 `v-model:xxx` 或 watch props）。这时需主动修改 wrapper 的 props 并触发更新：
- 用 `wrapper.setProps({ msg: 'new value' })` 模拟父组件更新 props
- 搭配 `await nextTick()` 等待 DOM 更新，再断言子组件渲染结果
- 若子组件内有 `watch` 监听该 prop，也会被触发执行
避免常见误区
不要试图 mock `defineEmits` 或重写 `$emit` 方法——VTU 已封装好；也不要手动 new 一个父组件实例去挂载子组件，这违背单元测试“隔离性”原则。真正需要 mock 的，永远是 **父组件对子组件的输入（props 函数）和外部依赖（如 axios、localStorage）**，而非子组件自身的逻辑出口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
