Vue Test Utils组合式API中wrapper emitted()失效问题排查

核心原因 #

wrapper.trigger('click')是异步操作，Vue的事件处理和状态更新均为异步流程，同步执行断言时，事件还未被捕获记录，导致wrapper.emitted()为空对象。

解决方案 #

1. 等待点击操作完成 #

修改测试代码，给trigger添加await，确保事件处理完成后再执行断言：

test('should render and emit event at click', async () => {
    const label = 'Siguiente'

    const wrapper = mount(Button, {
      props: {
        label
      }
    })

    // 等待点击事件处理完成
    await wrapper.trigger('click')

    expect(wrapper.emitted()).toHaveProperty('click')
    // 可选：精准断言事件触发次数
    expect(wrapper.emitted('click')).toHaveLength(1)
})

2. （备选）直接触发按钮元素 #

如果根组件的trigger未生效（比如存在事件冒泡异常），可以直接定位到按钮DOM元素再触发点击：

await wrapper.find('.eci-button').trigger('click')

环境适配说明 #

你的环境版本（Vue 3.2.31、Vitest 0.7.12、Vite 2.8.6、Vue/test-utils 2.0.0-rc.17）完全支持上述写法，await异步DOM操作是Vue Test Utils 2.x的标准规范，必须等待异步流程完成才能获取正确的事件记录。

内容的提问来源于stack exchange，提问作者elalekey