StoryをテストすることこそがUIテストである(気がする)
TL;DR
組み込んでみた。サクサク動くしいい感じ。
StorybookのPlayを使ってテスト
@storybook/testを利用して、StoryObjのにPlayに操作と期待値を設定すればOK。
Storybook上からもComponents Testとして見える。
Vitestと結合したStorybookのテスト
やりたかったのはこっち。
まずはStorybookのexperimental-addon-testを追加する。npxで実行すれば勝手に必要なファイルを作ってくれるから優秀。
npx storybook add @storybook/experimental-addon-test
これでテストが回る状態にはなるが、ひと工夫。
vitest.config.tsに、storyのみを対象にするようにした。(ついでにカバレッジを吐くようにもした)
たったこれだけで、playwrightを用いたstorybookのUIテストがコマンドから実行できるようになる。楽すぎ。
package.jsonにstoryをtestするscriptでも書いておけば良い。
"test-story": "vitest run --coverage"