fix(transition): fix higher order transition components with merged listeners

fix #3227

packages/vue/__tests__/Transition.spec.ts

@@ -1,6 +1,6 @@
 import { E2E_TIMEOUT, setupPuppeteer } from './e2eUtils'
 import path from 'path'
-import { h, createApp, Transition } from 'vue'
+import { h, createApp, Transition, ref, nextTick } from 'vue'
 
 describe('e2e: Transition', () => {
   const {
@@ -1634,23 +1634,6 @@ describe('e2e: Transition', () => {
     )
   })
 
-  test(
-    'warn when used on multiple elements',
-    async () => {
-      createApp({
-        render() {
-          return h(Transition, null, {
-            default: () => [h('div'), h('div')]
-          })
-        }
-      }).mount(document.createElement('div'))
-      expect(
-        '<transition> can only be used on a single element or component'
-      ).toHaveBeenWarned()
-    },
-    E2E_TIMEOUT
-  )
-
   describe('explicit durations', () => {
     test(
       'single value',
@@ -1916,4 +1899,59 @@ describe('e2e: Transition', () => {
       E2E_TIMEOUT
     )
   })
+
+  test('warn when used on multiple elements', async () => {
+    createApp({
+      render() {
+        return h(Transition, null, {
+          default: () => [h('div'), h('div')]
+        })
+      }
+    }).mount(document.createElement('div'))
+    expect(
+      '<transition> can only be used on a single element or component'
+    ).toHaveBeenWarned()
+  })
+
+  // #3227
+  test(`HOC w/ merged hooks`, async () => {
+    const innerSpy = jest.fn()
+    const outerSpy = jest.fn()
+
+    const MyTransition = {
+      render(this: any) {
+        return h(
+          Transition,
+          {
+            onLeave(el, end) {
+              innerSpy()
+              end()
+            }
+          },
+          this.$slots.default
+        )
+      }
+    }
+
+    const toggle = ref(true)
+
+    const root = document.createElement('div')
+    createApp({
+      render() {
+        return h(
+          MyTransition,
+          { onLeave: () => outerSpy() },
+          () => (toggle.value ? h('div') : null)
+        )
+      }
+    }).mount(root)
+
+    expect(root.innerHTML).toBe(`<div></div>`)
+
+    toggle.value = false
+    await nextTick()
+    expect(innerSpy).toHaveBeenCalledTimes(1)
+    expect(outerSpy).toHaveBeenCalledTimes(1)
+    expect(root.innerHTML).toBe(`<!---->`)
+  })
 })