Vue测试工具不会从元素+呈现模板标记中的内容

bq3bfh9z  于 2022-11-25  发布在  Vue.js
关注(0)|答案(1)|浏览(151)

我试着对我的组件做一些测试,这些组件大多包含元素加元素。但是,当运行测试时,我无法访问标签中的元素。
从下面的示例中,我无法在快照中呈现〈template #dropdown〉:

//示例规范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.版本

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

我试着将模板标签改为slot,也就是〈template #dropdown〉。内容确实反映在快照中,但网站上出现了一些错误。
如果有人知道解决办法,请告诉我。我被困了好几天......

ewm0tg9j

ewm0tg9j1#

下列程式码修正了这个问题:

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

相关问题