Cannot mount component with `async setup`

[ol1s]

I have the following example component and test:

const ExampleComponent = {
  template: `<div></div>`,
  async setup() {
    return {
      example: await Promise.resolve("Test"),
    }
  },
}

test("mounts example component with async setup", () => {
  const wrapper = mount(ExampleComponent)
  expect(wrapper).toBeTruthy()
})

However when I try and run the test I get the following error:

TypeError: Cannot read properties of null (reading 'addEventListener')

at _loop_1 (node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:7543:21)
at VueWrapper.Object.<anonymous>.VueWrapper.attachNativeEventListener (node_modules/@vue/test-utils/dist/vue-test utils.cjs.js:7553:13)
at new VueWrapper (node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:7504:15)
at createWrapper (node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:7682:12)
at mount (node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:7929:19)
at Object.<anonymous>

When I remove the async and promise and instead use a simple string, the test passes.

[LinusBorg]

Components with async setup need to be nested within `Suspense

[cexbrayat]

@ol1s You have to mount a fake component that uses Suspense and the component you want to test for the moment.

  test('Suspense', () => {
    const Component = defineComponent({
      components: { Async },
      template: '<Suspense><Async/></Suspense>'
    })

    const wrapper = mount(Component)
   // ...
  })

This is a known thing and we may add helpers to simplify this in the future, but we're waiting for Suspense to become stable in vue-next first (Suspense is still experimental at the moment).

[lmiller1990]

Any work to be done here? Sounds like we should just document this?

[LinusBorg]

I don't think there's much else to do.

[cexbrayat]

I opened a PR to add a minimal example to the docs #1215