Playwright でテストを書いていて、.ts ファイルから読み込んだ設定値をコンポーネントに受け渡しできなかったので原因をメモ。

---

事象

Playwright で test() 内でマウントしているコンポーネントに対して、 .ts ファイルから読み込んだ設定値を渡そうとしたところ、hoge is not defined というエラーが発生した。

原因

Playwright では、テスト自体は Node.js として実行され、コンポーネントは実際のブラウザで実行される仕組みとなっている。テストでは Node.js の全ての機能が使用できるが、Node.js として実行している部分で読み込んだファイルのオブジェクトをコンポーネントの Props として渡すことができない。

公式ドキュメントはこちら

https://playwright.dev/docs/test-components#test-stories

プレーンな Object, string, number は渡すことができるが、Node.js の世界で作ったオブジェクトやコールバック関数を渡すことはできない。

解決策

公式でも紹介されている通り、テスト対象のコンポーネントを wrap したコンポーネントを作成することで解決している。

Wrapper コンポーネントを別の tsx ファイルで作成しておき、テストからは await mount(<Wrapper />) することで、Wrapper を定義しているファイルではブラウザ内で実行されるコードとすることができる。