feat(asyncComponent): SSR/hydration support for async component

packages/runtime-core/__tests__/apiAsyncComponent.spec.ts

@@ -193,8 +193,7 @@ describe('api: createAsyncComponent', () => {
     const err = new Error('errored out')
     reject!(err)
     await timeout()
-    // error handler will not be called if error component is present
-    expect(handler).not.toHaveBeenCalled()
+    expect(handler).toHaveBeenCalled()
     expect(serializeInner(root)).toBe('errored out')
 
     toggle.value = false
@@ -247,8 +246,7 @@ describe('api: createAsyncComponent', () => {
     const err = new Error('errored out')
     reject!(err)
     await timeout()
-    // error handler will not be called if error component is present
-    expect(handler).not.toHaveBeenCalled()
+    expect(handler).toHaveBeenCalled()
     expect(serializeInner(root)).toBe('errored out')
 
     toggle.value = false
@@ -327,7 +325,7 @@ describe('api: createAsyncComponent', () => {
     expect(serializeInner(root)).toBe('<!---->')
 
     await timeout(1)
-    expect(handler).not.toHaveBeenCalled()
+    expect(handler).toHaveBeenCalled()
     expect(serializeInner(root)).toBe('timed out')
 
     // if it resolved after timeout, should still work
@@ -354,6 +352,7 @@ describe('api: createAsyncComponent', () => {
       components: { Foo },
       render: () => h(Foo)
     })
+    const handler = (app.config.errorHandler = jest.fn())
     app.mount(root)
     expect(serializeInner(root)).toBe('<!---->')
     await timeout(1)
@@ -361,6 +360,7 @@ describe('api: createAsyncComponent', () => {
 
     await timeout(16)
     expect(serializeInner(root)).toBe('timed out')
+    expect(handler).toHaveBeenCalled()
 
     resolve!(() => 'resolved')
     await timeout()
@@ -459,6 +459,32 @@ describe('api: createAsyncComponent', () => {
     expect(serializeInner(root)).toBe('resolved & resolved')
   })
 
-  // TODO
-  test.todo('suspense with error handling')
+  test('suspense with error handling', async () => {
+    let reject: (e: Error) => void
+    const Foo = createAsyncComponent(
+      () =>
+        new Promise((_resolve, _reject) => {
+          reject = _reject
+        })
+    )
+
+    const root = nodeOps.createElement('div')
+    const app = createApp({
+      components: { Foo },
+      render: () =>
+        h(Suspense, null, {
+          default: () => [h(Foo), ' & ', h(Foo)],
+          fallback: () => 'loading'
+        })
+    })
+
+    const handler = (app.config.errorHandler = jest.fn())
+    app.mount(root)
+    expect(serializeInner(root)).toBe('loading')
+
+    reject!(new Error('no'))
+    await timeout()
+    expect(handler).toHaveBeenCalled()
+    expect(serializeInner(root)).toBe('<!----> & <!---->')
+  })
 })

packages/runtime-core/__tests__/hydration.spec.ts

@@ -7,7 +7,8 @@ import {
   Portal,
   createStaticVNode,
   Suspense,
-  onMounted
+  onMounted,
+  createAsyncComponent
 } from '@vue/runtime-dom'
 import { renderToString } from '@vue/server-renderer'
 import { mockWarn } from '@vue/shared'
@@ -381,8 +382,64 @@ describe('SSR hydration', () => {
     expect(container.innerHTML).toMatch(`<span>2</span><span>3</span>`)
   })
 
-  // TODO
-  test.todo('async component')
+  test('async component', async () => {
+    const spy = jest.fn()
+    const Comp = () =>
+      h(
+        'button',
+        {
+          onClick: spy
+        },
+        'hello!'
+      )
+
+    let serverResolve: any
+    let AsyncComp = createAsyncComponent(
+      () =>
+        new Promise(r => {
+          serverResolve = r
+        })
+    )
+
+    const App = {
+      render() {
+        return ['hello', h(AsyncComp), 'world']
+      }
+    }
+
+    // server render
+    const htmlPromise = renderToString(h(App))
+    serverResolve(Comp)
+    const html = await htmlPromise
+    expect(html).toMatchInlineSnapshot(
+      `"<!--[-->hello<button>hello!</button>world<!--]-->"`
+    )
+
+    // hydration
+    let clientResolve: any
+    AsyncComp = createAsyncComponent(
+      () =>
+        new Promise(r => {
+          clientResolve = r
+        })
+    )
+
+    const container = document.createElement('div')
+    container.innerHTML = html
+    createSSRApp(App).mount(container)
+
+    // hydration not complete yet
+    triggerEvent('click', container.querySelector('button')!)
+    expect(spy).not.toHaveBeenCalled()
+
+    // resolve
+    clientResolve(Comp)
+    await new Promise(r => setTimeout(r))
+
+    // should be hydrated now
+    triggerEvent('click', container.querySelector('button')!)
+    expect(spy).toHaveBeenCalled()
+  })
 
   describe('mismatch handling', () => {
     test('text node', () => {