Vue Test Utils无法渲染Element Plus模板插槽内容的问题

在测试基于Element Plus的组件时，发现快照无法渲染<template #dropdown>中的内容，相关代码及现象如下：

测试代码（example.spec.js） #

import { ElementPlus } from 'element-plus'
import { createI18n } from 'vue-i18n'
import { mount } from '@vue/test-utils'
import store from '@/store/index'
import TTT from '../../../TTT.vue'

const i18n = createI18n({
  // vue-i18n options here ...
})

describe('test', () => {
  const wrapper = mount(TTT, {
    global: {
      plugins: [ElementPlus, i18n, store],
    },
  })
  expect(wrapper)
  test('snapShot', () => {
    expect(wrapper.element).toMatchSnapshot()
  })
})

组件代码（TTT.vue） #

<template>
  <el-dropdown class="me-3" :hide-timeout="0" :show-timeout="0">
    <span class="el-dropdown-link h-100">
      <a href="#" class="px-4 py-3 text-white font-18" @click.prevent><font-awesome-icon class="font1R6" icon="earth-americas" /></a>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click.prevent="handleChangeLanguage(item.value)"> 123 </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

生成的快照 #

exports[`test snapShot 1`] = `
<el-dropdown
  class="me-3"
  hide-timeout="0"
  show-timeout="0"
>
  <span
    class="el-dropdown-link h-100"
  >
    <a
      class="px-4 py-3 text-white font-18"
      href="#"
    >
      <font-awesome-icon
        class="font1R6"
        icon="earth-americas"
      />
    </a>
  </span>
</el-dropdown>
`;

尝试将<template #dropdown>改为<slot name="dropdown">后，快照能显示内容，但网站运行报错。

解决方案 #

1. 触发下拉菜单展开状态 #

Element Plus的el-dropdown默认隐藏下拉面板，测试时需主动触发展开，才能让插槽内容渲染到DOM中。可以通过触发下拉按钮的点击事件实现：

修改测试代码如下：

describe('test', () => {
  let wrapper;
  beforeEach(() => {
    wrapper = mount(TTT, {
      global: {
        plugins: [ElementPlus, i18n, store],
      },
    });
  });

  test('snapShot', async () => {
    // 触发下拉按钮点击，展开菜单
    await wrapper.find('.el-dropdown-link').trigger('click');
    // 等待DOM更新完成
    await wrapper.vm.$nextTick();
    expect(wrapper.element).toMatchSnapshot();
  });
});

2. 处理异步更新 #

触发点击后DOM更新是异步操作，必须使用await等待$nextTick或waitFor，确保快照捕获到展开后的状态。

3. 保留原组件的插槽写法 #

不要修改<template #dropdown>的写法，<slot name="dropdown">是在当前组件定义插槽，而非向el-dropdown传递插槽内容，这会导致生产环境报错，必须保持原写法不变。

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