Vue测试实用程序不呈现来自element plus的模板标记中的内容

Question

我试图为我的组件做一些测试，这些组件主要包含元素+元素。但是，在运行测试时，我无法访问<template>标记中的元素。

从下面的示例中，我无法在快照中呈现<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">。这些内容确实反映在快照中，但网站上出现了一些错误。

如果有人知道解决办法，请告诉我。我被困了好几天..。

Answer 1

以下代码解决了这个问题：

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