如何在Vitest中模拟v-dialog的关闭行为？

你遇到的问题是测试中触发弹窗关闭的方式不正确，以下是几种正确的模拟v-dialog关闭的方法：

1. 通过修改组件Props关闭弹窗 #

v-dialog的显示状态由modelValue Props控制，直接修改该Props是最直接的方式：

// 替换你代码中"triggering dialog close"的部分
await wrapper.setProps({ modelValue: false });
await waitFor(() => {
  const dialogAfterClose = screen.queryByRole('dialog');
  expect(dialogAfterClose).not.toBeInTheDocument();
});

2. 模拟点击弹窗外部（遮罩层） #

Vuetify的v-dialog点击外部关闭是通过点击遮罩层（.v-overlay元素）实现的，直接定位遮罩并模拟点击即可：

// 弹窗打开后，定位遮罩元素并点击
const overlay = document.querySelector('.v-overlay');
await fireEvent.click(overlay);
await waitFor(() => {
  const dialogAfterClose = screen.queryByRole('dialog');
  expect(dialogAfterClose).not.toBeInTheDocument();
});

3. 正确触发update:modelValue事件 #

如果想用触发事件的方式，需要通过组件实例发送事件，而不是wrapper.emitted()（该方法仅用于获取组件已触发的事件记录）：

await wrapper.vm.$emit('update:modelValue', false);
await waitFor(() => {
  const dialogAfterClose = screen.queryByRole('dialog');
  expect(dialogAfterClose).not.toBeInTheDocument();
});

原代码无效的原因 #

• wrapper.emitted()是用来查询组件发出的事件，而非向组件发送事件，所以无法改变弹窗状态；
• 点击外部未生效时，大概率是没正确定位到遮罩元素，不过你已设置attachTo: document.body，这部分配置是正确的。

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