如何使用Vitest测试Vue3+Vuetify3中的Teleport对话框？

问题根源 #

Vuetify 3的<v-dialog>默认通过Teleport将对话框内容转移到指定DOM节点（此处为#my-teleport），因此对话框的DOM结构不在组件自身的根节点内，而是挂载到了#my-teleport元素中。你的测试代码尝试从组件wrapper中获取VDialog组件或其内部元素，但wrapper的html()仅包含组件自身DOM，不包含Teleport转移出去的内容，因此找不到目标元素。

解决方案 #

1. 等待Vue完成DOM更新：点击按钮后需等待Vue完成Teleport内容的挂载，确保DOM更新完成。
2. 从Teleport目标元素中查询内容：直接通过document获取#my-teleport元素，在其中查找对话框的DOM或组件。
3. 正确获取VDialog组件实例：组件实例仍在wrapper范围内，需通过组件名称（PascalCase格式）查找。

修改后的测试代码 #

describe('Dialog', () => {
  beforeEach(() => {
    const el = document.createElement('div');
    el.id = 'my-teleport';
    document.body.appendChild(el);
  });

  afterEach(() => {
    // 更安全的清理方式，避免outerHTML清空引发的意外问题
    const teleportEl = document.getElementById('my-teleport');
    if (teleportEl) teleportEl.remove();
  });

  test('test open dialog', async () => {
    const wrapper = mount(Dialog, { global: { plugins: [vuetify] } });

    const openBtn = wrapper.find('#open');
    await openBtn.trigger('click');
    // 等待Vue完成DOM更新，确保Teleport内容挂载完成
    await wrapper.vm.$nextTick();

    // 验证组件的dialog状态正确
    expect(wrapper.vm.dialog).toBe(true);

    // 获取VDialog组件实例（组件实例仍在wrapper范围内）
    const dialogComponent = wrapper.findComponent({ name: 'VDialog' });
    expect(dialogComponent.exists()).toBe(true);

    // 从Teleport目标元素中查找对话框的DOM内容
    const closeBtn = document.querySelector('#close');
    expect(closeBtn).toBeTruthy();
    expect(closeBtn.textContent).toContain('Close Dialog');

    // 测试关闭对话框逻辑
    await closeBtn.click();
    await wrapper.vm.$nextTick();
    expect(wrapper.vm.dialog).toBe(false);
  });
});

额外注意事项 #

• 避免使用document.body.outerHTML = ''做清理，直接移除#my-teleport元素更安全。
• Vuetify组件名称为PascalCase格式，查找组件时需用{ name: 'VDialog' }，而非字符串'v-dialog'（渲染后的标签并非v-dialog）。
• Teleport内容不在wrapper的DOM树中，需从document直接查询，或通过wrapper.vm.$el.ownerDocument访问文档上下文。

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