Vitest测试PrimeVue3 Dialog组件异常：无法定位内部元素

PrimeVue的Dialog组件默认采用**Portal（门户）**技术，会把弹窗内容挂载到body或指定的外部元素上，这就导致Vue Test Utils在测试时只能捕获到<portal-stub>，无法直接访问Dialog内部的DOM元素，比如关闭按钮。下面是几种可行的解决方案：

方案1：让Dialog内容留在组件内部（推荐） #

给PrimeVue Dialog添加appendTo="self"属性，强制内容不通过Portal挂载，而是留在当前组件的DOM结构中。

步骤： #

1. 在你的MyDialog.vue组件中，新增一个appendTo属性传递给内部的Dialog：

<template>
  <Dialog 
    :visible="visible" 
    :appendTo="appendTo"
    <!-- 其他Dialog属性 -->
  >
    <!-- 弹窗内容，包括关闭按钮 -->
    <button class="p-button-secondary" @click="$emit('close')">关闭</button>
  </Dialog>
</template>

<script setup>
defineProps({
  visible: Boolean,
  appendTo: {
    type: String,
    default: 'body' // 默认保持原有行为
  }
})
</script>

2. 在测试代码中，挂载组件时传入appendTo="self"：

beforeEach(() => {
  myDialogWrapper = shallowMount(MyDialog, {
    props: {
      visible: false,
      appendTo: 'self' // 关键配置，让内容留在组件内
    },
    global: {
      stubs: {
        // 其他stub保持不变
      }
    }
  })
})

这样测试时就能直接获取到Dialog内部的按钮元素了。

方案2：正确Stub Dialog组件 #

如果不想修改组件的默认行为，可以在测试中自定义Dialog的Stub，让它根据visible属性渲染插槽内容，而不是输出portal-stub：

beforeEach(() => {
  myDialogWrapper = shallowMount(MyDialog, {
    props: {
      visible: true
    },
    global: {
      stubs: {
        Dialog: {
          template: '<div v-if="visible"><slot></slot></div>',
          props: ['visible'] // 接收visible属性来控制显示
        }
      }
    }
  })
})

这个Stub会在visible为true时渲染插槽里的内容，测试代码就能找到按钮了。

方案3：优化DOM更新等待逻辑 #

如果仍然遇到元素找不到的问题，可以改用waitFor方法来等待DOM更新完成，替代单纯的$nextTick：

import { waitFor } from '@vue/test-utils'

it('displays close button', async () => {
  myDialogWrapper.setProps({ visible: true })
  
  await waitFor(() => {
    expect(myDialogWrapper.find('.p-button-secondary').exists()).toBe(true)
  })
})

waitFor会轮询直到断言成立，比$nextTick更可靠，适合处理异步DOM更新的场景。

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