docs: Add docs and test for stubbing an async component (#516)

* docs: Add section for stubbing an async component

* test: Add a test case for stubbing an async component with name

docs/guide/advanced/stubs-shallow-mount.md

@@ -135,6 +135,42 @@ test('shallow stubs out all child components', () => {
 If you used VTU V1, you may remember this as `shallowMount`. That method is still available, too - it's the same as writing `shallow: true`.
 :::
 
+## Stubbing an async component
+
+In case you want to stub out an async component, then make sure to provide a name for the component and use this name as stubs key.
+
+```js
+// AsyncComponent.js
+export default defineComponent({
+  name: 'AsyncComponent',
+  template: '<span>AsyncComponent</span>'
+})
+
+// App.js
+const App = defineComponent({
+  components: {
+    MyComponent: defineAsyncComponent(() => import('./AsyncComponent'))
+  },
+  template: '<MyComponent/>'
+})
+
+// App.spec.js
+test('stubs async component', async () => {
+  const wrapper = mount(App, {
+    global: {
+      stubs: {
+        // Besure to use the name from AsyncComponent and not "MyComponent"
+        AsyncComponent: true
+      }
+    }
+  })
+
+  await flushPromises()
+
+  expect(wrapper.html()).toBe('<async-component-stub></async-component-stub>')
+})
+```
+
 ## Default Slots and `shallow`
 
 Since `shallow` stubs out all the content of a components, any `<slot>` won't get rendered when using `shallow`. While this is not a problem in most cases, there are some scenarios where this isn't ideal.

tests/mountingOptions/stubs.global.spec.ts

@@ -1,6 +1,6 @@
-import { h, ComponentOptions, defineComponent } from 'vue'
+import { h, ComponentOptions, defineComponent, defineAsyncComponent } from 'vue'
 
-import { config, mount, RouterLinkStub } from '../../src'
+import { config, flushPromises, mount, RouterLinkStub } from '../../src'
 import Hello from '../components/Hello.vue'
 import ComponentWithoutName from '../components/ComponentWithoutName.vue'
 import ComponentWithSlots from '../components/ComponentWithSlots.vue'
@@ -387,6 +387,31 @@ describe('mounting options: stubs', () => {
     expect(wrapper.find('#content').exists()).toBe(true)
   })
 
+  it('stubs async component with name', async () => {
+    const AsyncComponent = defineComponent({
+      name: 'AsyncComponent',
+      template: '<span>AsyncComponent</span>'
+    })
+    const TestComponent = defineComponent({
+      components: {
+        MyComponent: defineAsyncComponent(async () => AsyncComponent)
+      },
+      template: '<MyComponent/>'
+    })
+
+    const wrapper = mount(TestComponent, {
+      global: {
+        stubs: {
+          AsyncComponent: true
+        }
+      }
+    })
+
+    await flushPromises()
+
+    expect(wrapper.html()).toBe('<async-component-stub></async-component-stub>')
+  })
+
   describe('stub slots', () => {
     const Component = {
       name: 'Parent',