Storybookで書いたテストをコマンドで実行する方法

はじめに

初めまして。エンジニアのkeita_Maxです。

Storybookで書いたテストをGitHubActionsとかで使用するために、コマンドで実行したいということでやり方を調べました。

ライブラリインストールと設定

まずコマンドで実行するためにライブラリをインストールします。
以下のコマンドでインストールして下さい。

npm i -D @storybook/test-runner @storybook/jest

package.jsonのscriptsに以下を追記します。

package.json

    "storybook": "storybook dev -p 6006",
    "test-storybook":"test-storybook --url http://localhost:6006",

テストコードについて

テストコードについては以前記事で紹介したのでこちらを参考にしてください。

実行する

まず、以下コマンドでStorybookを立ち上げます。

npm run storybook

次に以下のコマンドでテストを実行します。

npm run test-storybook 

するとテストが走り、以下のように結果が出てきます。

Test Suites: 8 passed, 8 total
Tests:       8 passed, 8 total
Snapshots:   0 total
Time:        5.808 s
Ran all test suites.

これでコマンドでテストができるようになりました。

さいごに

簡単にStorybookでテストできるようになりました。

やり方が違ったり、もっといいやり方があるというご指摘がある方はコメントしていただけると幸いです。

最後まで読んでいただきありがとうございました。

参考