[Bug]: async react components

[sand4rt]

Version

1.46.0

Steps to reproduce

1. clone the repo: https://github.com/sand4rt/playwright-react-async-components
2. run npm i
3. run npm run test-ct

Expected behavior

Test should pass

Actual behavior

test fails

Additional context

React async components are commonly used in Next.js with the app router (surprisingly, this hasn't been reported yet). I've been quite busy lately, so i haven't had time to investigate, but this might be related to: https://github.com/microsoft/playwright/issues/26308.

snippet:

export default async function Home() {
  const response = await fetch('https://playwright.dev/api');
  const data = await response.json();
  return <main>{data}</main>;
}

import Page from "./page";
import { expect, test } from "@playwright/experimental-ct-react";
import { Suspense } from "react";

test('suspense', async ({ page, mount }) => {
    page.route('https://playwright.dev/api', async (route) => {
        route.fulfill({ json: 'boop' });
    });
    const component = await mount(<Suspense><Page /></Suspense>);
    await expect(component).toContainText('boop'); // fails
});

[sand4rt]

Note: adjust the nextjs docs when this is supported: https://github.com/vercel/next.js/pull/69368/files#diff-17101b1f28b1328c50c485e0f95f7eda347ed8be4549f5413aa2cbe667f3a858R185