Add tests using async components

src/mount.ts

@@ -136,7 +136,6 @@ export function mount(
 
   // create the app
   const app = createApp(Parent)
-
   const global = mergeGlobalProperties(config.global, options?.global)
 
   // global mocks mixin
@@ -152,6 +151,13 @@ export function mount(
     app.mixin(mixin)
   }
 
+  // AppConfig
+  if (global?.config) {
+    for (const [k, v] of Object.entries(global.config)) {
+      app.config[k] = v
+    }
+  }
+
   // use and plugins from mounting options
   if (global?.plugins) {
     for (const use of global.plugins) app.use(use)

src/types.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentOptions, Directive, Plugin } from 'vue'
+import { Component, ComponentOptions, Directive, Plugin, AppConfig } from 'vue'
 
 interface RefSelector {
   ref: string
@@ -21,6 +21,7 @@ export type FindAllComponentsSelector = NameSelector | string
 
 export type GlobalMountOptions = {
   plugins?: Plugin[]
+  config?: AppConfig
   mixins?: ComponentOptions[]
   mocks?: Record<string, any>
   provide?: Record<any, any>

tests/features/async-components.spec.ts

@@ -0,0 +1,114 @@
+import { defineAsyncComponent, defineComponent, h, AppConfig } from 'vue'
+import flushPromises from 'flush-promises'
+
+import { mount } from '../../src'
+
+const config: AppConfig = {
+  devtools: false,
+  optionMergeStrategies: {},
+  globalProperties: {},
+  isCustomElement: (tag: string) => false,
+  performance: false,
+  errorHandler: (error: Error) => {
+    if (error.message.match(/Async component failed to load./)) {
+      return
+    }
+    throw error
+  }
+}
+
+// AsyncComponents are documented here: https://github.com/vuejs/rfcs/blob/async-component/active-rfcs/0026-async-component-api.md
+describe('defineAsyncComponent', () => {
+  beforeAll(jest.useFakeTimers)
+  afterAll(jest.useRealTimers)
+
+  it('works with the basic usage', async () => {
+    const AsyncHello = defineAsyncComponent(() =>
+      import('../components/Hello.vue')
+    )
+    const Comp = defineComponent({
+      render() {
+        return h('div', [h(AsyncHello)])
+      }
+    })
+
+    const wrapper = mount(Comp, { global: { config } })
+    await flushPromises()
+    expect(wrapper.html()).toContain('Hello world')
+  })
+
+  it('works with options usage', async () => {
+    const Async = defineAsyncComponent({
+      loader: () =>
+        new Promise<any>((res) => {
+          setTimeout(() => {
+            res({
+              template: '<div>Async Component</div>'
+            })
+          }, 75)
+        }),
+      loadingComponent: {
+        template: '<div>Loading Component</div>'
+      },
+      delay: 10
+    })
+
+    const Comp = defineComponent({
+      render() {
+        return h('div', [h(Async)])
+      }
+    })
+
+    const wrapper = mount(Comp, { global: { config } })
+    jest.runTimersToTime(35)
+    await flushPromises()
+    expect(wrapper.html()).toContain('Loading Component')
+
+    jest.runTimersToTime(100)
+    await flushPromises()
+    expect(wrapper.html()).toContain('Async Component')
+  })
+
+  it('catches error and renders ErrorComponent', async () => {
+    const Async = defineAsyncComponent({
+      loader: () =>
+        new Promise<any>((res, rej) => {
+          rej('Async component failed to load.')
+        }),
+      errorComponent: {
+        template: '<div>Error Component</div>'
+      },
+      onError(error, retry, fail, attempts) {
+        fail()
+      }
+    })
+
+    const Comp = defineComponent({
+      render() {
+        return h('div', [h(Async)])
+      }
+    })
+
+    const wrapper = mount(Comp, { global: { config } })
+    await flushPromises()
+
+    expect(wrapper.html()).toContain('Error Component')
+  })
+
+  // TODO: Find out why this does not work
+  // Is it valid to have an AsyncComponent as the root? Was it ever?
+  it.skip('works when AsyncComponent is the root', async () => {
+    const AsyncHello = defineAsyncComponent(() =>
+      import('../components/Hello.vue')
+    )
+    const Comp = defineComponent({
+      render() {
+        return h(AsyncHello)
+      }
+    })
+
+    const wrapper = mount(Comp, { global: { config } })
+    await flushPromises()
+    expect(wrapper.html()).toContain('Hello world')
+  })
+})