4

我有一个使用 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>

我错过了什么吗？

4

1 回答 1

0

这里的问题wrapper.html()只是在您的组件中返回 HTML - 因为您在组件外部传送，所以当您调用wrapper.html().

你有几个选择。一种是对document.body.outerHTML. 另一个是使用一个巧妙的技巧findComponent，我在这里写了关于它并在这里发布了一个关于它的视频。

您可以尝试的另一件事是我刚刚想到（但尚未测试）是：

mount({
  template: `
    <div id="app" />
    <MetaHead />
  `,
  components: { MetaHead }
})

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

于 2021-07-28T00:15:54.103 回答