Vue test utils doesn't render the content in template tag from element plus

Question

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 <template> tag .

From the example below, I'm not able to render the <template #dropdown> in the snapshot:

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

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.

If anyone knows the solution, please let me know. I'm stuck for days....

I guess it did not found your component, perhaps it's globally available in your app but not in your tests, you can define additionnal components on the second parameter of mount method (stubs property) — Lk77, Nov 15 '22 at 09:34

score 2 · Accepted Answer · edited Nov 25 '22 at 16:29

2

The following code fixed the issue:

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

edited Nov 25 '22 at 16:29

Ankit.Z

740
8
20

answered Nov 24 '22 at 07:54

louis wang

51
4

1

Or you could simply do `teleport: true`, which should have the same effect. – Priidu Neemre May 05 '23 at 06:50

Vue test utils doesn't render the content in template tag from element plus

1 Answers1