VitestとStorybookの統合による自動化UIテスト

StoryをテストすることこそがUIテストである(気がする)

 

TL;DR

組み込んでみた。サクサク動くしいい感じ。

github.com

 

StorybookのPlayを使ってテスト

@storybook/testを利用して、StoryObjのにPlayに操作と期待値を設定すればOK。

Storybook上からもComponents Testとして見える。

storybook.js.org

 

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"

 

Copyright (C) 2018-2022 akagoma. All Rights Reserved.