Bug: content in the template tag from element plus cannot be rendered

[a-louiswang]

Describe the bug

I'm trying to do some testings for my components which mostly contain element-plus elements. However, when running tests, I'm not able to access to elements in the tag .

To Reproduce
// 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>

// snapshot

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>
`;

Expected behavior
The content in element plus should appear

Related information:

• @vue/test-utils version: 2.2.1
• Vue version: 3.2.37
• node version: v14.16.0

Additional context
I tried to change the template tag to slot, i.e. <template #dropdown> to <slot name="dropdown">. The content did reflect in snapshot, but some errors showed up on the website so I guess that's not the solution

[cexbrayat]

Hi @a-louiswang

Can you make a small reproduction online with https://stackblitz.com/edit/vitest-dev-vitest-arknvs?file=package.json&initialPath=__vitest__ (ideally without i18n, store, etc.)

Then we can take a look and see what's going on

[a-louiswang]

The following code fixed the issue:

const wrapper = mount(GroupAction, { global: { stubs: { teleport: { template: '<div />' }, }, }, })