我试着对我的组件做一些测试,这些组件大多包含元素加元素。但是,当运行测试时,我无法访问标签中的元素。
从下面的示例中,我无法在快照中呈现〈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〉。内容确实反映在快照中,但网站上出现了一些错误。
如果有人知道解决办法,请告诉我。我被困了好几天......
1条答案
按热度按时间ewm0tg9j1#
下列程式码修正了这个问题: