fix(stub): avoid stub cache for teleport for reactive update (#2065)

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

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:
+          '<div>' +
+          '<button @click="add">Add</button>' +
+          '<Teleport to="body"><div id="count">{{ count }}</div></Teleport>' +
+          '</div>',
+        setup() {
+          const count = ref(1)
+          const add = () => (count.value += 1)
+          return { count, add }
+        }
+      }),
+      {
+        global: {
+          stubs: {
+            teleport: true
+          }
+        }
+      }
+    )
+
+    expect(wrapper.html()).toBe(
+      '<div><button>Add</button>\n' +
+        '  <teleport-stub to="body">\n' +
+        '    <div id="count">1</div>\n' +
+        '  </teleport-stub>\n' +
+        '</div>'
+    )
+
+    expect(wrapper.find('#count').text()).toBe('1')
+
+    await wrapper.find('button').trigger('click')
+
+    expect(wrapper.find('#count').text()).toBe('2')
+  })
 })