Vue3组件中emit事件触发无法测试问题求助

问题描述 #

在Vue3组件中使用带@click.prevent的<a>标签触发自定义事件，组件内方法确实执行（可看到console.log输出），但测试时无法捕获到对应的自定义事件。尝试过改用mount+$nextTick、替换为按钮、手动调用preventDefault、给方法加spy等方式均无效。

原组件示例 #

组件代码 #

<script setup lang="ts">
const emit = defineEmits<{
  closeMinicart: any[];
}>();

const closeDialog = (ev: Event) => {
  console.log('------------- close dialog ----------------');
  emit('closeMinicart');
};
</script>
<template>
  <a
    href="#"
    @click.prevent="closeDialog($event)">
    Continue shopping
  </a>
</template>

测试代码 #

it('should emit `closeMinicart` when clicked', async () => {
  const user = userEvent.setup();
  const { emitted, waitFor } = render(EmptyCart);
  const el = screen.getByText(/Continue shopping/i);
  await user.click(el);
  await waitFor(() => {
    expect(emitted()).toHaveProperty('closeMinicart');
  })
});

报错信息 #

FAIL  src/components/EmptyCart.test.ts > Continue shopping link > should emit `closeMinicart` when clicked
AssertionError: expected { pointerover: [ [ …(1) ] ], …(11) } to have property "closeMinicart"

极简复现示例 #

组件代码 #

<script setup lang="ts">
import { onMounted } from 'vue';

const emit = defineEmits<{
  (e: 'myEvent'): void;
  (e: 'foobar', value: string): void;
}>();

onMounted(() => {
  emit('foobar', 'something to talk about');
});
</script>
<template>
  <a href="#"
     @click.prevent="$emit('myEvent')">
     Continue shopping
  </a>
</template>

测试代码 #

it('should emit `myEvent` when clicked', async () => {
  const wrapper = mount(MyComponent);
  expect(wrapper.emitted()).toHaveProperty('foobar');
  await wrapper.find('a').trigger('click');
  expect(wrapper.emitted()).toHaveProperty('myEvent');
});

报错信息 #

AssertionError: expected { click: [ [ …(1) ] ] } to have property "foobar"

打印emitted()结果 #

{"click":[{"isTrusted":false,"_vts":1691539798806}]}

解决方案 #

1. 确保mount/render正确处理异步 #

Vue3中mount是异步操作，必须使用await等待组件挂载完成，否则无法捕获onMounted中触发的事件：

it('should emit `myEvent` when clicked', async () => {
  const wrapper = await mount(MyComponent); // 添加await
  expect(wrapper.emitted()).toHaveProperty('foobar');
  await wrapper.find('a').trigger('click');
  expect(wrapper.emitted()).toHaveProperty('myEvent');
});

2. 修正defineEmits的类型定义写法 #

使用更明确的类型声明，避免事件名被错误解析：

<script setup lang="ts">
// 方式1：数组形式（更直观）
const emit = defineEmits(['closeMinicart']);

// 方式2：类型声明（明确参数类型）
const emit = defineEmits<{
  closeMinicart: []; // 无参数时用空数组
}>();

const closeDialog = (ev: Event) => {
  console.log('------------- close dialog ----------------');
  emit('closeMinicart');
};
</script>

3. 优化测试中事件捕获的断言方式 #

使用emitted(eventName)直接获取特定事件，比检查对象属性更可靠：

it('should emit `closeMinicart` when clicked', async () => {
  const user = userEvent.setup();
  const { emitted, waitFor } = render(EmptyCart);
  const el = screen.getByText(/Continue shopping/i);
  await user.click(el);
  await waitFor(() => {
    expect(emitted('closeMinicart')).toBeDefined();
    // 若要断言触发次数：expect(emitted('closeMinicart')).toHaveLength(1);
  })
});

4. 检查测试库版本兼容性 #

确保使用的@vue/test-utils版本（v2.x+）与Vue3版本兼容，避免因版本不匹配导致的事件追踪失效。

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