diff --git a/src/vnodeTransformers/util.ts b/src/vnodeTransformers/util.ts index 950b8b204..279890733 100644 --- a/src/vnodeTransformers/util.ts +++ b/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] } } diff --git a/tests/components/TeleportRemountChild.vue b/tests/components/TeleportRemountChild.vue new file mode 100644 index 000000000..d10381354 --- /dev/null +++ b/tests/components/TeleportRemountChild.vue @@ -0,0 +1,17 @@ + + + diff --git a/tests/components/TeleportRemountParent.vue b/tests/components/TeleportRemountParent.vue new file mode 100644 index 000000000..bc827d735 --- /dev/null +++ b/tests/components/TeleportRemountParent.vue @@ -0,0 +1,18 @@ + + diff --git a/tests/features/teleport.spec.ts b/tests/features/teleport.spec.ts index 651495b32..051b3f9b9 100644 --- a/tests/features/teleport.spec.ts +++ b/tests/features/teleport.spec.ts @@ -170,9 +170,9 @@ describe('teleport', () => { expect(wrapper.html()).toBe( '
\n' + - ' \n' + - '
1
\n' + - '
\n' + + ' \n' + + '
1
\n' + + ' \n' + '
' ) diff --git a/tests/mountingOptions/global.stubs.spec.ts b/tests/mountingOptions/global.stubs.spec.ts index e25e16ee8..3ffd3e405 100644 --- a/tests/mountingOptions/global.stubs.spec.ts +++ b/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( - '\n' + - '
\n' + - '
' + '\n' + + '
\n' + + '' ) // 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( - '\n' + - '
\n' + - '
' + '\n' + + '
\n' + + '' ) }) + + 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('child') + + 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', () => {