playwrightのテストの書き方がわかりません。

Question

実現したいこと

以下Issueについてです。
https://github.com/a10adotapp/react-waiter/issues/1

以下の内容について、Playwrightを使用したテストを書きたいです。

• Promiseが解決するまではプレースホルダ（sideshow）を表示すること
• Promise解決後は指定した内容（serve）をレンダリングすること

背景

以下のReactのコンポーネントに対するテストをplaywrightで書いています。
複数のPromiseが解決するまでプレースホルダを表示し、全てのPromise解決後に指定した内容がレンダリングされるコンポーネントです。

https://github.com/a10adotapp/react-waiter/blob/1833831aef9e3b954f34c3fe1b2ddc273b78bff3/src/index.tsx

    <Waiter
      orders={{
        getUuidResult: getUuid(props.delay),
        getUuidCachedResult: getUuidCached(props.delay),
      }}
      sideshow={<div>Loading...</div>}
      serve={({
        getUuidResult,
        getUuidCachedResult,
      }) => (
        // レンダリングしたい内容
      )} />

発生している問題・分からないこと

以下の内容でindex.spec.tsxを作成しました。

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

test("run as expected", async ({ mount }) => {
  const delay = async (delay: number, error?: string | undefined) => {
    return new Promise<number>((resolve, reject) => {
      setTimeout(() => {
        if (error) {
          return reject(new Error(error))
        }

        resolve(delay);
      }, delay);
    });
  };

  const component = await mount(
    <Waiter
      orders={{
        delay1000: delay(1000),
        delay2000: delay(2000),
        delayError: delay(3000, "resolve error"),
      }}
      sideshow={<div>Loading...</div>}
      serve={({
        delay1000,
        delay2000,
        delayError,
      }) => {
        return (
          <ul>
            <li id="delay-1000">{delay1000.value?.toFixed(0) || delay1000.error?.message || "delay1000"}</li>
            <li id="delay-2000">{delay2000.value?.toFixed(0) || delay2000.error?.message || "delay2000"}</li>
            <li id="delay-error">{delayError.value?.toFixed(0) || delayError.error?.message || "delayError"}</li>
          </ul>
        );
      }}
    />
  );

  await expect(component).toContainText("Loading...");
  await expect(component).not.toContainText("delay1000");
  await expect(component).not.toContainText("delay2000");
  await expect(component).not.toContainText("resolve error");

  // TODO: add test for rendering after all orders are ready
  // this is not implemented by not knowing how.
});

上記ソースコメントの通りですが、Promiseが解決するまではプレースホルダ（sideshow）を表示することについてはテストできた一方、

Promise解決後は指定した内容（serve）をレンダリングすることについてテストを書くことができず困っております。

以下試してみましたが、コンポーネントの指定した内容を取得することはできませんでした。

setTimeout(async () => {
  await expect(component).toContainText("delay1000");
}, 5000);

await page.waitForTimeout(5000);

以下のように、実際にNext.jsのアプリケーションにimportして使用すると問題なく動くので、テストの書き方が悪いのかと思います。

https://github.com/a10adotapp/react-waiter/blob/1833831aef9e3b954f34c3fe1b2ddc273b78bff3/examples/nextjs/README.md

答えをお持ちの方や、何か思い当たる方がいらっしゃいましたらご教示いただけると幸いです。
よろしくお願い致します。

該当のソースコード

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

質問文のとおりです。

補足

package.json

{
  "devDependencies": {
    "@chromatic-com/storybook": "^3.2.5",
    "@eslint/js": "^9.21.0",
    "@playwright/experimental-ct-react": "^1.51.0",
    "@storybook/addon-essentials": "^8.6.3",
    "@storybook/addon-onboarding": "^8.6.3",
    "@storybook/addon-storysource": "^8.6.3",
    "@storybook/blocks": "^8.6.3",
    "@storybook/experimental-addon-test": "^8.6.3",
    "@storybook/react": "^8.6.3",
    "@storybook/react-vite": "^8.6.3",
    "@storybook/test": "^8.6.3",
    "@types/node": "^22.13.9",
    "@types/react": "^19.0.10",
    "@typescript-eslint/parser": "^8.26.0",
    "@vitest/browser": "^3.0.7",
    "@vitest/coverage-v8": "^3.0.7",
    "eslint": "^9.21.0",
    "eslint-plugin-react": "^7.37.4",
    "playwright": "^1.50.1",
    "storybook": "^8.6.3",
    "typescript": "^5.8.2",
    "typescript-eslint": "^8.26.0",
    "vitest": "^3.0.7"
  },
  "dependencies": {
    "react": "^19.0.0"
  }
}

Answer 1

github拝見しました！
waiterは内部のChefで、Reactの "async component"（＝asyncな関数でJSXを返す） を使っているようですが、playwrightは現在そのようなコンポーネントのテストをサポートしていない可能性があります

ソース：https://github.com/vercel/next.js/pull/69368/files#diff-17101b1f28b1328c50c485e0f95f7eda347ed8be4549f5413aa2cbe667f3a858R185

async function コンポーネントは基本的にサーバーコンポーネント用途（Next.js など）でのみ使われるため、playwrightがうまくマウントできていないと考えられます
Chef をuseEffect ベースの実装に変えるとCSR的に動いてテスト可能になるかもしれませんが、別のテスト方法を考えるのも一つの手段かもしれません