fix: use Teleport with disabled=true instead of stub

Author: Victor Fernandez

src/vnodeTransformers/util.ts

@@ -85,7 +85,16 @@ export const createVNodeTransformer = ({
       registerStub({ source: originalType, stub: transformedType })
       // https://github.com/vuejs/test-utils/issues/1829 & https://github.com/vuejs/test-utils/issues/1888
       // Teleport/KeepAlive should return child nodes as a function
-      if (isTeleport(originalType) || isKeepAlive(originalType)) {
+      if (isTeleport(originalType)) {
+        return [
+          originalType,
+          { ...props, disabled: true },
+          children,
+          ...restVNodeArgs
+        ]
+      }
+
+      if (isKeepAlive(originalType)) {
         return [transformedType, props, () => children, ...restVNodeArgs]
       }
     }

tests/components/TeleportRemountChild.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue'
+
+const emit = defineEmits<{ myEvent: ['mount' | 'unmount'] }>()
+
+onMounted(() => {
+  emit('myEvent', 'mount')
+})
+
+onUnmounted(() => {
+  emit('myEvent', 'unmount')
+})
+</script>
+
+<template>
+  <span>child</span>
+</template>

tests/components/TeleportRemountParent.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import Child from './TeleportRemountChild.vue'
+
+const parentValue = ref<Array<'mount' | 'unmount'>>([])
+
+const handleEmit = (e: 'mount' | 'unmount') => {
+  parentValue.value.push(e)
+}
+</script>
+<template>
+  <div>
+    <p id="parent-value">{{ JSON.stringify(parentValue) }}</p>
+    <Teleport to="#teleport-target">
+      <Child @my-event="handleEmit" />
+    </Teleport>
+  </div>
+</template>

tests/features/teleport.spec.ts

@@ -170,9 +170,9 @@ describe('teleport', () => {
 
     expect(wrapper.html()).toBe(
       '<div><button>Add</button>\n' +
-        '  <teleport-stub to="body">\n' +
-        '    <div id="count">1</div>\n' +
-        '  </teleport-stub>\n' +
+        '  <!--teleport start-->\n' +
+        '  <div id="count">1</div>\n' +
+        '  <!--teleport end-->\n' +
         '</div>'
     )
 

tests/mountingOptions/global.stubs.spec.ts

@@ -1,11 +1,18 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { h, defineComponent, defineAsyncComponent, Directive } from 'vue'
+import {
+  h,
+  defineComponent,
+  defineAsyncComponent,
+  Directive,
+  nextTick
+} from 'vue'
 import { config, flushPromises, mount, RouterLinkStub } from '../../src'
 import Hello from '../components/Hello.vue'
 import ComponentWithoutName from '../components/ComponentWithoutName.vue'
 import ComponentWithSlots from '../components/ComponentWithSlots.vue'
 import ScriptSetupWithChildren from '../components/ScriptSetupWithChildren.vue'
 import AutoImportScriptSetup from '../components/AutoImportScriptSetup.vue'
+import TeleportRemountParent from '../components/TeleportRemountParent.vue'
 
 describe('mounting options: stubs', () => {
   const configStubsSave = config.global.stubs
@@ -603,9 +610,9 @@ describe('mounting options: stubs', () => {
       })
 
       expect(wrapper.html()).toBe(
-        '<teleport-stub to="body">\n' +
-          '  <div id="content"></div>\n' +
-          '</teleport-stub>'
+        '<!--teleport start-->\n' +
+          '<div id="content"></div>\n' +
+          '<!--teleport end-->'
       )
       // Make sure that we don't have a warning when stubbing teleport
       // https://github.com/vuejs/test-utils/issues/1829
@@ -643,11 +650,52 @@ describe('mounting options: stubs', () => {
       })
 
       expect(wrapper.html()).toBe(
-        '<teleport-stub to="body">\n' +
-          '  <div id="content-global-stubs-teleport"></div>\n' +
-          '</teleport-stub>'
+        '<!--teleport start-->\n' +
+          '<div id="content-global-stubs-teleport"></div>\n' +
+          '<!--teleport end-->'
       )
     })
+
+    describe('should not unmount the content', () => {
+      it('without stub', async () => {
+        const div = document.createElement('div')
+        div.id = 'teleport-target'
+        document.body.appendChild(div)
+
+        const wrapper = mount(TeleportRemountParent, {
+          global: {
+            stubs: {
+              teleport: false
+            }
+          }
+        })
+
+        await nextTick()
+
+        const childElement = div.innerHTML
+        expect(childElement).toBe('<span>child</span>')
+
+        const parentValue = wrapper.find('#parent-value').text()
+        expect(JSON.parse(parentValue!)).toStrictEqual(['mount'])
+
+        document.body.innerHTML = ''
+      })
+
+      it('with stub', async () => {
+        const wrapper = mount(TeleportRemountParent, {
+          global: {
+            stubs: {
+              teleport: true
+            }
+          }
+        })
+
+        await nextTick()
+
+        const parentValue = wrapper.find('#parent-value').text()
+        expect(JSON.parse(parentValue)).toStrictEqual(['mount'])
+      })
+    })
   })
 
   describe('keep-alive', () => {