如何使 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 }
})

我不知道这是否可行，但值得一试。

vue-teleport vue-test-utils vuejs3

如何使 Vue3 测试工具与传送一起工作

问题描述

解决方法

相关问答