Vue 3: Async component with suspense wrapper

Struggling to test a async component. I created a suspense wrapper component with defineComponent which i think should work but it doesn’t:

it("renders a async component with a suspense wrapper", () => {
  const Component = defineComponent({
    async setup() {
      return () => h("div", "AsyncSetup");
    },
  });

  const { getByText } = render(
    defineComponent({
      render() {
        return h(Suspense, null, {
          default: h(Component),
          fallback: h("div", "fallback"),
        });
      },
    })
  );

  expect(getByText("AsyncSetup")).toBeInTheDocument(); // fails
});

Also created a repository for reproducing the issue.

[Ragura]

Any updates on this? We have embraced Suspense and async components very heavily in our project and this is really holding us back in writing tests. I’ve noticed it’s the last part of making this library fully Vue 3 compatible.

[sand4rt]

As workaround i’m using a modified version of the render function called renderAsync for now. The code can be viewed here.

After many problems with JSDOM/HappyDOM and issues like this i decided not to use VTL anymore. Playwright component testing has a almost identical API, is fast as well and runs in a real browser…