Mar*_*ano 6 vue-test-utils vuejs3 vue-teleport
我有一个使用 teleport to 的组件，测试 html 似乎没有按预期工作。我找不到有关此特定用途的任何文档。这是我的测试：
describe('MetaHead', () => {
it('dynamic metadata tags contain custom text', () => {
let title = 'My Page';
let description = 'Some description about my page';
// This component uses Vue3's teleport to tag <head>
// we must modify wrapper to contain such tag
document.body.innerHTML = `
<head>
<div id="app"></div>
</head>
`
const wrapper = mount(MetaHead, {
attachTo: document.getElementById('app'),
props: {
title,
description
},
global:{
mocks: {
$route:{fullPath: 'full/path'}
}
}
})
expect(wrapper.html()).toContain(title)
expect(wrapper.html()).toContain(description)
})
})
最小的组件如下所示：
<template>
<teleport to="head">
<title>{{title}}</title>
<meta property="og:site_name" :content="title">
<meta name="description" :content="description">
</teleport>
</template>
我错过了什么吗？
这里的问题是wrapper.html()仅在组件中返回 HTML - 因为您正在传送到组件外部，所以当您调用wrapper.html().
你有几个选择。有人会提出反对的主张document.body.outerHTML。另一个方法是使用一个巧妙的技巧，我在这里findComponent写了它并在这里发布了一个关于它的视频。
我刚刚想到（但尚未测试）的另一件事你可以尝试是：
mount({
template: `
<div id="app" />
<MetaHead />
`,
components: { MetaHead }
})
我不知道这是否有效，但值得一试。
| 归档时间： |
|
| 查看次数： |
3180 次 |
| 最近记录： |