如何解决如何使 Vue3 测试工具与传送一起工作
我有一个使用传送到 的组件，测试 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 中使用巧妙的技巧，我写了 here 并发布了关于它的视频 here。
我刚刚想到（但尚未测试）的另一件事是：
mount({
template: `
<div id="app" />
<MetaHead />
`,components: { MetaHead }
})
我不知道这是否可行，但值得一试。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。