test(transition): add reusable Transition component with dynamic key handling

packages-private/vapor-e2e-test/__tests__/transition.spec.ts

@@ -1704,6 +1704,42 @@ describe('vapor transition', () => {
     E2E_TIMEOUT,
   )
 
+  test(
+    'should work with reusable Transition + keyed element',
+    async () => {
+      const btnSelector = '.reusable-keyed > button'
+      const containerSelector = '.reusable-keyed > h1'
+
+      await waitForInnerHTML(containerSelector, '0')
+
+      // change key
+      expect(
+        (await transitionStart(btnSelector, containerSelector)).classNames,
+      ).toStrictEqual(['test-leave-from', 'test-leave-active'])
+
+      await nextFrame()
+      expect(await classList(containerSelector)).toStrictEqual([
+        'test-leave-active',
+        'test-leave-to',
+      ])
+      await waitForInnerHTML(containerSelector, '1')
+
+      // change key again
+      expect(
+        (await transitionStart(btnSelector, containerSelector)).classNames,
+      ).toStrictEqual(['test-leave-from', 'test-leave-active'])
+
+      await nextFrame()
+      expect(await classList(containerSelector)).toStrictEqual([
+        'test-leave-active',
+        'test-leave-to',
+      ])
+
+      await waitForInnerHTML(containerSelector, '2')
+    },
+    E2E_TIMEOUT,
+  )
+
   test(
     'should work with out-in mode',
     async () => {

packages-private/vapor-e2e-test/transition/App.vue

@@ -666,6 +666,12 @@ const Comp2 = defineVaporComponent({
         <h1 style="position: absolute" :key="count">{{ count }}</h1>
       </Transition>
     </div>
+    <div class="reusable-keyed">
+      <button @click="count++">inc</button>
+      <MyTransition>
+        <h1 style="position: absolute" :key="count">{{ count }}</h1>
+      </MyTransition>
+    </div>
     <!-- keyed fragment end -->
 
     <!-- mode -->