diff --git a/src/vnodeTransformers/util.ts b/src/vnodeTransformers/util.ts index 85e443738..950b8b204 100644 --- a/src/vnodeTransformers/util.ts +++ b/src/vnodeTransformers/util.ts @@ -67,13 +67,10 @@ export const createVNodeTransformer = ({ if ( cachedTransformation && // Don't use cache for root component, as it could use stubbed recursive component - !isRootComponent(rootComponents, componentType, instance) + !isRootComponent(rootComponents, componentType, instance) && + !isTeleport(originalType) && + !isKeepAlive(originalType) ) { - // 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)) { - return [cachedTransformation, props, () => children, ...restVNodeArgs] - } return [cachedTransformation, props, children, ...restVNodeArgs] } diff --git a/tests/features/teleport.spec.ts b/tests/features/teleport.spec.ts index 73c039622..651495b32 100644 --- a/tests/features/teleport.spec.ts +++ b/tests/features/teleport.spec.ts @@ -1,5 +1,5 @@ import { beforeEach, describe, expect, it, vi } from 'vitest' -import { defineComponent, h, Teleport } from 'vue' +import { defineComponent, h, ref, Teleport } from 'vue' import { mount } from '../../src' import WithTeleportPropsComp from '../components/WithTeleportPropsComp.vue' import WithTeleportEmitsComp from '../components/WithTeleportEmitsComp.vue' @@ -144,4 +144,42 @@ describe('teleport', () => { expect(withProps.emitted().greet[0]).toEqual(['Hey!']) }) + + it('should reactively update content with teleport', async () => { + const wrapper = mount( + defineComponent({ + template: + '
' + + '' + + '
{{ count }}
' + + '
', + setup() { + const count = ref(1) + const add = () => (count.value += 1) + return { count, add } + } + }), + { + global: { + stubs: { + teleport: true + } + } + } + ) + + expect(wrapper.html()).toBe( + '
\n' + + ' \n' + + '
1
\n' + + '
\n' + + '
' + ) + + expect(wrapper.find('#count').text()).toBe('1') + + await wrapper.find('button').trigger('click') + + expect(wrapper.find('#count').text()).toBe('2') + }) })