タイトルが結論です 😂
+ import { configure } from '@storybook/testing-library'
+ configure({
+ asyncUtilTimeout: 10000,
+ })
const preview = {};
export default preview;
背景
私たちのプロダクトでは Storybook Test Runner を使用しています。これは内部的に jest-playwright を利用し、ヘッドレスブラウザ上でストーリーが適切にレンダリングされるかどうかを確認することが可能です。ストーリーに Play function が設定されていれば、その実行も検証できます。
ある時から、CI での Storybook Test Runner が断続的に失敗するようになりました。以下のようなログが出力されていました:
FAIL ../../../../../tmp/e648e4499abc23ca7cf371f5602ac97e/some-component.test.js (5.182 s)
● SomeComponent › Default › play-test
page.evaluate: StorybookTestRunnerError:
An error occurred in the following story. Access the link for full output:
http://127.0.0.1:6007/?path=/story/some-component--default&addonPanel=storybook/interactions/panel
Message:
Unable to find role="button" and name "保存"
Ignored nodes: comments, script, style
<div
id="storybook-root"
>
<div>
loading...
</div>
</div>
Ignored nodes: comments, script, style
<div
id="storybook-root"
>
<div>
loading...
</div>
</div>
--------------------------------------------------
Browser logs:
ログを見ると、button role の要素を探しているもののまだローディング中画面のようです。このコンポーネントはデータの取得が絡むため findByRole を使用してボタンが表示されるまで待機していますが、データ取得が完了せずにタイムアウトしているようです。
今回は一例の紹介でしたが、実際は複数箇所で断続的な失敗が起きるようになっていました。理想的にはタイムアウトの原因を根本的に解消したいところですが、まずは CI が断続的に失敗する状況を復旧するために、短期的な解決策として findByRole のタイムアウト時間をグローバルで延長することにしました。これは Testing Library の configure() 関数を使用して asyncUtilTimeout を設定することで、この問題に対処することが可能です。
しかしながら、設定をどこですればいいのかに詰まってしまったため今回記事にしました。
結論
結論としては、 configure() は Storybook の preview.js で呼び出す必要がありました。
+ import { configure } from '@storybook/testing-library'
+ configure({
+ asyncUtilTimeout: 10000,
+ })
const preview = {};
export default preview;
最初は Storybook Test Runner の設定ファイルである test-runner-jest.config.js に設定するのか？それとも jest-playwright の問題なのか？と詰まっていましたが、Play function はブラウザで実行されているためブラウザで読み込まれる場所で設定する必要がありました。
Discussion