How to make Vue3 test utils work with teleport

Question

How to make Vue3 test utils work with teleport

3.3k Views Asked by Marco Cano At 19 April 2025 at 04:05

I have a component that uses teleport to , the test html doesn't seem to be working as expected. I can't find any documentation on this particular use. Here's my test:

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)
  })
})

and the minimal component looks like this:

<template>
  <teleport to="head">
    <title>{{title}}</title>
    <meta property="og:site_name" :content="title">
    <meta name="description" :content="description">
  </teleport>
</template>

Am I missing something?

Original Q&A

There are 2 best solutions below

**lmiller1990** · Answer 1

the problem here is wrapper.html() only returns HTML in your component - since you are teleporting outside your component, that markup won't show up when you call wrapper.html().

You have a few options. One would be making an assertion against document.body.outerHTML. Another would be using a neat trick with findComponent, I wrote about it here and posted a video about it here.

Another thing you could try that I just thought of (but have not tested) would be:

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

I don't know if that will work, but worth a try.

**Ferri Adi Prasetya** · Answer 2

Another approach is, you can get element of your destination of teleport in your test.

From your case, you can just get element with id 'app', and get the innerHtml

e.g:

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(document.getElementById('app')?.innerHTML).toContain(title)
expect(document.getElementById('app')?.innerHTML).toContain(description)
})

How to make Vue3 test utils work with teleport

There are 2 best solutions below

Related Questions in VUEJS3

Related Questions in VUE-TEST-UTILS

Related Questions in VUE-TELEPORT

Trending Questions

Popular # Hahtags

Popular Questions