diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index c5e0860bf..da900836f 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -88,6 +88,7 @@ const config = {
           },
           { text: 'Testing Vuex', link: '/guide/advanced/vuex' },
           { text: 'Testing Vue Router', link: '/guide/advanced/vue-router' },
+          { text: 'Testing Teleport', link: '/guide/advanced/teleport' },
           {
             text: 'Third-party integration',
             link: '/guide/advanced/third-party'
diff --git a/docs/guide/advanced/teleport.md b/docs/guide/advanced/teleport.md
new file mode 100644
index 000000000..5e6429e85
--- /dev/null
+++ b/docs/guide/advanced/teleport.md
@@ -0,0 +1,189 @@
+# Testing Teleport
+
+Vue 3 comes with a new built-in component: `<Teleport>`, which allows components to "teleport" their content far outside of their own `<template>`. Most tests written with Vue Test Utils are scoped to the component passed to `mount`, which introduces some complexity when it comes to testing a component that is teleported outside of the component where it is initially rendered.
+
+Here are some strategies and techniques for testing components using `<Teleport>`.
+
+## Example
+
+In this example we are testing a `<Navbar>` component. It renders a `<Sigup>` component inside of a `<Teleport>`. The `target` prop of `<Teleport>` is an element located outside of the `<Navbar>` component.
+
+This is the `Navbar.vue` component:
+
+```vue
+<template>
+  <Teleport to="#modal">
+    <Signup />
+  </Teleport>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import Signup from './Signup.vue'
+
+export default defineComponent({
+  components: {
+    Signup
+  }
+})
+</script>
+```
+
+It simply teleports a `<Signup>` somewhere else. It's simple for the purpose of this example.
+
+`Signup.vue` is a form that validates if `username` is greater than 8 characters. If it is, when submitted, it emits a `signup` event with the `username` as the payload. Testing that will be our goal.
+
+```vue
+<template>
+  <div>
+    <form @submit.prevent="submit">
+      <input v-model="username" />
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  emits: ['signup'],
+  data() {
+    return {
+      username: ''
+    }
+  },
+  computed: {
+    error() {
+      return this.username.length < 8
+    }
+  },
+  methods: {
+    submit() {
+      if (!this.error) {
+        this.$emit('signup', this.username)
+      }
+    }
+  }
+}
+</script>
+```
+
+## Mounting the Component
+
+Starting with a minimal test:
+
+```ts
+import { mount } from '@vue/test-utils'
+import Navbar from './Navbar.vue'
+import Signup from './Signup.vue'
+
+test('emits a signup event when valid', async () => {
+  const wrapper = mount(Navbar)
+})
+```
+
+Running this test will give you a warning: `[Vue warn]: Failed to locate Teleport target with selector "#modal"`. Let's create it:
+
+```ts {5-15}
+import { mount } from '@vue/test-utils'
+import Navbar from './Navbar.vue'
+import Signup from './Signup.vue'
+
+beforeEach(() => {
+  // create teleport target
+  const el = document.createElement('div')
+  el.id = 'modal'
+  document.body.appendChild(el)
+})
+
+afterEach(() => {
+  // clean up
+  document.body.outerHTML = ''
+})
+
+test('teleport', async () => {
+  const wrapper = mount(Navbar)
+})
+```
+
+We are using Jest for this example, which does not reset the DOM every test. For this reason, it's good to clean up after each test with `afterEach`.
+
+## Interacting with the Teleported Component
+
+The next thing to do is fill out the username input. Unfortunately, we cannot use `wrapper.find('input')`. Why not? A quick `console.log(wrapper.html())` shows us:
+
+```html
+<!--teleport start-->
+<!--teleport end-->
+```
+
+We see some comments used by Vue to handle `<Teleport>` - but no `<input>`. That's because the `<Signup>` component (and its HTML) are not rendered inside of `<Navbar>` anymore - it was teleported outside.
+
+Although the actual HTML is teleported outside, it turns out the Virtual DOM associated with `<Navbar>` maintains a reference to the original component. This means you can use `getComponent` and `findComponent, which operate on the Virtual DOM, not the regular DOM.
+
+```ts {12}
+beforeEach(() => {
+  // ...
+})
+
+afterEach(() => {
+  // ...
+})
+
+test('teleport', async () => {
+  const wrapper = mount(Navbar)
+
+  wrapper.getComponent(Signup) // got it!
+})
+```
+
+`getComponent` returns a `VueWrapper`. Now you can use methods like `get`, `find` and `trigger`.
+
+Let's finish the test:
+
+```ts {4-8}
+test('teleport', async () => {
+  const wrapper = mount(Navbar)
+
+  const signup = wrapper.getComponent(Signup)
+  await signup.get('input').setValue('valid_username')
+  await signup.get('form').trigger('submit.prevent')
+
+  expect(signup.emitted().signup[0]).toEqual(['valid_username'])
+})
+```
+
+It passes!
+
+The full test:
+
+```ts
+import { mount } from '@vue/test-utils'
+import Navbar from './Navbar.vue'
+import Signup from './Signup.vue'
+
+beforeEach(() => {
+  // create teleport target
+  const el = document.createElement('div')
+  el.id = 'modal'
+  document.body.appendChild(el)
+})
+
+afterEach(() => {
+  // clean up
+  document.body.outerHTML = ''
+})
+
+test('teleport', async () => {
+  const wrapper = mount(Navbar)
+
+  const signup = wrapper.getComponent(Signup)
+  await signup.get('input').setValue('valid_username')
+  await signup.get('form').trigger('submit.prevent')
+
+  expect(signup.emitted().signup[0]).toEqual(['valid_username'])
+})
+```
+
+## Conclusion
+
+- Create a teleport target with `document.createElement`.
+- Find teleported components using `getComponent` or `findComponent` which operate on the Virtual DOM level.
diff --git a/tests/components/EmitsEvent.vue b/tests/components/EmitsEvent.vue
new file mode 100644
index 000000000..bea93f6d2
--- /dev/null
+++ b/tests/components/EmitsEvent.vue
@@ -0,0 +1,18 @@
+<template>
+  <button @click="greet" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  emits: ['greet'],
+  setup(props, { emit }) {
+    return {
+      greet: () => {
+        emit('greet', 'Hey!')
+      }
+    }
+  }
+})
+</script>
\ No newline at end of file
diff --git a/tests/components/WithTeleportEmitsComp.vue b/tests/components/WithTeleportEmitsComp.vue
new file mode 100644
index 000000000..e008eff4a
--- /dev/null
+++ b/tests/components/WithTeleportEmitsComp.vue
@@ -0,0 +1,9 @@
+<template>
+  <teleport to="#somewhere">
+    <emits-event msg="hi there" />
+  </teleport>
+</template>
+
+<script setup lang="ts">
+import EmitsEvent from './EmitsEvent.vue'
+</script>
\ No newline at end of file
diff --git a/tests/components/WithTeleportPropsComp.vue b/tests/components/WithTeleportPropsComp.vue
new file mode 100644
index 000000000..e335ab866
--- /dev/null
+++ b/tests/components/WithTeleportPropsComp.vue
@@ -0,0 +1,9 @@
+<template>
+  <teleport to="#somewhere">
+    <with-props msg="hi there" />
+  </teleport>
+</template>
+
+<script setup lang="ts">
+import WithProps from './WithProps.vue'
+</script>
\ No newline at end of file
diff --git a/tests/docs-examples/Navbar.vue b/tests/docs-examples/Navbar.vue
new file mode 100644
index 000000000..089875742
--- /dev/null
+++ b/tests/docs-examples/Navbar.vue
@@ -0,0 +1,16 @@
+<template>
+  <Teleport to="#modal">
+    <Signup />
+  </Teleport>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import Signup from './Signup.vue'
+
+export default defineComponent({
+  components: {
+    Signup
+  }
+})
+</script>
\ No newline at end of file
diff --git a/tests/docs-examples/Signup.vue b/tests/docs-examples/Signup.vue
new file mode 100644
index 000000000..10b9aaf5d
--- /dev/null
+++ b/tests/docs-examples/Signup.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <form @submit.prevent="submit">
+      <input v-model="username" />
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  emits: ['signup'],
+  data() {
+    return {
+      username: ''
+    }
+  },
+  computed: {
+    error() {
+      return this.username.length < 8
+    }
+  },
+  methods: {
+    submit() {
+      if (!this.error) {
+        this.$emit('signup', this.username)
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/tests/docs-examples/teleport.spec.ts b/tests/docs-examples/teleport.spec.ts
new file mode 100644
index 000000000..a378fc137
--- /dev/null
+++ b/tests/docs-examples/teleport.spec.ts
@@ -0,0 +1,25 @@
+import { mount } from '../../src'
+import Navbar from './Navbar.vue'
+import Signup from './Signup.vue'
+
+beforeEach(() => {
+  // create teleport target
+  const el = document.createElement('div')
+  el.id = 'modal'
+  document.body.appendChild(el)
+})
+
+afterEach(() => {
+  // clean up
+  document.body.outerHTML = ''
+})
+
+test('teleport', async () => {
+  const wrapper = mount(Navbar)
+
+  const signup = wrapper.getComponent(Signup)
+  await signup.get('input').setValue('valid_username')
+  await signup.get('form').trigger('submit.prevent')
+
+  expect(signup.emitted().signup[0]).toEqual(['valid_username'])
+})
diff --git a/tests/features/teleport.spec.ts b/tests/features/teleport.spec.ts
new file mode 100644
index 000000000..9cc8bcaae
--- /dev/null
+++ b/tests/features/teleport.spec.ts
@@ -0,0 +1,146 @@
+import { defineComponent, h, Teleport } from 'vue'
+import { mount } from '../../src'
+import WithTeleportPropsComp from '../components/WithTeleportPropsComp.vue'
+import WithTeleportEmitsComp from '../components/WithTeleportEmitsComp.vue'
+import WithProps from '../components/WithProps.vue'
+import EmitsEvent from '../components/EmitsEvent.vue'
+
+describe('teleport', () => {
+  beforeEach(() => {
+    document.body.outerHTML = ''
+  })
+
+  it('teleports a string', () => {
+    const destination = document.createElement('div')
+    destination.id = 'far-away'
+    document.body.appendChild(destination)
+
+    const Comp = defineComponent({
+      setup() {
+        return () =>
+          h(() => h(Teleport, { to: '#far-away' }, h('div', 'teleported')))
+      }
+    })
+
+    const wrapper = mount(Comp)
+
+    expect(document.body.outerHTML).toBe(
+      `<body><div id="far-away"><div>teleported</div></div></body>`
+    )
+  })
+
+  const Greeter = defineComponent({
+    emits: {
+      greet: (msg: string) => {
+        return true
+      }
+    },
+    props: {
+      msg: {
+        type: String,
+        required: true
+      }
+    },
+    setup({ msg }, { emit }) {
+      return () =>
+        h(
+          'button',
+          { onClick: () => emit('greet', `${msg.toUpperCase()}!!!`) },
+          `${msg}!!!`
+        )
+    }
+  })
+
+  it('teleports a component with props', async () => {
+    const destination = document.createElement('div')
+    destination.id = 'far-away'
+    document.body.appendChild(destination)
+
+    const onGreet = jest.fn()
+
+    const Comp = defineComponent({
+      setup() {
+        return () =>
+          h(() =>
+            h(
+              Teleport,
+              { to: '#far-away' },
+              h(Greeter, { onGreet, msg: 'Hello' })
+            )
+          )
+      }
+    })
+
+    const wrapper = mount(Comp)
+    document.querySelector<HTMLButtonElement>('button')!.click()
+
+    expect(onGreet).toHaveBeenCalledWith('HELLO!!!')
+    expect(document.body.outerHTML).toBe(
+      `<body><div id="far-away"><button>Hello!!!</button></div></body>`
+    )
+  })
+
+  it('teleports a component with props', async () => {
+    const destination = document.createElement('div')
+    destination.id = 'far-away'
+    document.body.appendChild(destination)
+
+    const onGreet = jest.fn()
+
+    const Comp = defineComponent({
+      setup() {
+        return () =>
+          h(() =>
+            h(
+              Teleport,
+              { to: '#far-away' },
+              h(Greeter, { onGreet, msg: 'Hello' })
+            )
+          )
+      }
+    })
+
+    const wrapper = mount(Comp)
+
+    // although <Greeter /> is teleported outside the component,
+    // it's still in the vdom of the wrapper,
+    // so you can just query it like you normally would - pretty neat.
+    await wrapper.getComponent(Greeter).trigger('click')
+
+    expect(onGreet).toHaveBeenCalledWith('HELLO!!!')
+    expect(wrapper.getComponent(Greeter).props()).toEqual({
+      msg: 'Hello'
+    })
+
+    expect(document.body.outerHTML).toBe(
+      `<body><div id="far-away"><button>Hello!!!</button></div></body>`
+    )
+  })
+
+  it('works with SFC and gets props', async () => {
+    const destination = document.createElement('div')
+    destination.id = 'somewhere'
+    document.body.appendChild(destination)
+
+    const wrapper = mount(WithTeleportPropsComp)
+
+    const withProps = wrapper.getComponent(WithProps)
+
+    expect(withProps.props()).toEqual({
+      msg: 'hi there'
+    })
+  })
+
+  it('works with SFC and captures emitted events', async () => {
+    const destination = document.createElement('div')
+    destination.id = 'somewhere'
+    document.body.appendChild(destination)
+
+    const wrapper = mount(WithTeleportEmitsComp)
+
+    const withProps = wrapper.getComponent(EmitsEvent)
+    withProps.trigger('click')
+
+    expect(withProps.emitted().greet[0]).toEqual(['Hey!'])
+  })
+})
diff --git a/tsconfig.json b/tsconfig.json
index 1fa5a428a..068a5b894 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,6 +9,7 @@
     "esModuleInterop": true,
     "experimentalDecorators": true,
     "allowSyntheticDefaultImports": true,
+    "allowJs": true,
     "baseUrl": ".",
     "paths": {
       "vue": [