Vue3 Element Plus组件在Vitest测试中无法渲染传入Props

1. 确认组件props与ElDialog的显示控制逻辑 #

首先检查你的ConfirmModal组件是否正确将show props映射到ElDialog的visible属性——Element Plus的ElDialog是通过visible（或v-model:visible）控制显示状态的。如果只是传递了自定义的show但未绑定到ElDialog的visible，Dialog会默认处于隐藏状态，内部承载content的元素自然无法被找到。

示例组件修正代码：

<template>
  <ElDialog :visible="show" title="确认操作" @close="emit('close')">
    <span class="modal-content">{{ content }}</span>
    <template #footer>
      <ElButton @click="emit('cancel')">取消</ElButton>
      <ElButton type="primary" @click="emit('confirm')">确认</ElButton>
    </template>
  </ElDialog>
</template>

<script setup>
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  content: {
    type: String,
    required: true
  }
})
const emit = defineEmits(['close', 'cancel', 'confirm'])
</script>

2. 处理Dialog的异步渲染与过渡动画 #

Element Plus的Dialog带有默认过渡动画，Vitest同步执行测试时，可能在Dialog还未完成渲染就去查找元素，导致找不到目标节点。可以通过两种方式解决：

方式一：等待DOM更新完成 #

使用await nextTick()让测试等待Vue完成DOM更新：

import { mount } from '@vue/test-utils'
import ConfirmModal from './ConfirmModal.vue'
import { nextTick } from 'vue'
import ElementPlus from 'element-plus'

test('渲染正确的content文本', async () => {
  const wrapper = mount(ConfirmModal, {
    global: {
      plugins: [ElementPlus]
    },
    props: {
      show: true,
      content: '确认删除这条数据吗？'
    }
  })

  await nextTick() // 等待Dialog渲染完成

  const contentSpan = wrapper.find('.modal-content')
  expect(contentSpan.text()).toBe('确认删除这条数据吗？')
})

方式二：全局禁用过渡动画 #

在测试文件顶部配置禁用Element Plus的过渡效果，避免动画延迟影响测试：

import { config } from '@vue/test-utils'
import ElementPlus from 'element-plus'

// 全局禁用Element Plus过渡动画
config.global.plugins.push({
  install(app) {
    app.use(ElementPlus)
    app.config.globalProperties.$ELEMENT = { transition: false }
  }
})

test('渲染正确的content文本', () => {
  const wrapper = mount(ConfirmModal, {
    props: {
      show: true,
      content: '确认删除这条数据吗？'
    }
  })

  expect(wrapper.find('.modal-content').text()).toBe('确认删除这条数据吗？')
})

3. 检查元素选择器的准确性 #

确认测试代码中查找元素的选择器与组件内的DOM结构完全匹配：

• 如果组件内的content包裹在特定类名的容器中，比如<div class="modal-body"><span>{{ content }}</span></div>，则测试时需要用wrapper.find('.modal-body span')定位
• 避免使用过于宽泛的选择器，防止匹配到其他无关元素

4. 确保测试环境正确注册Element Plus #

如果测试时没有全局注册Element Plus，或者组件内未按需导入ElDialog，会导致Dialog无法正常渲染，进而找不到内部元素。务必在测试的全局配置中注册Element Plus，如上述代码示例所示。

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