Next.js と Typescript のプロジェクトに Storybook を導入して Snapshot Test や Unit Test を試してみます。 この記事では現時点で prerelease 版の Component Story Format 3.0 (以後 CSF3.0) を使用した Story を作成します。 CSF3.0 については以下公式の記事を参考にしました。 CSF3.0 で 新たに追加される play 関数についても試してみます。 play 関数はフォームの値入力や button のクリックなどユーザーインタラクションを Story で表現できる便利な関数です。 play 関数のおかげで Storybook の表現の幅が広がり、Storybook の導入で Snapshot Test と併せて Unit Test が書きやすくなります。 個人的には Storyb
![Next.jsにStorybook(CSF3.0)を導入してSnapshot TestやUnit Testを実行する | ZUMA Lab](https://cdn-ak-scissors.b.st-hatena.com/image/square/4f6d272eb9902e63ec94561c20e1c0c4e45169ea/height=288;version=1;width=512/https%3A%2F%2Fogi-api.vercel.app%2FNext.js%25E3%2581%25ABStorybook%28CSF3.0%29%25E3%2582%2592%25E5%25B0%258E%25E5%2585%25A5%25E3%2581%2597%25E3%2581%25A6Snapshot%2520Test%25E3%2582%2584Unit%2520Test%25E3%2582%2592%25E5%25AE%259F%25E8%25A1%258C%25E3%2581%2599%25E3%2582%258B%2520%257C%2520ZUMA%2520Lab.png%3Fmd%3D0%26fontSize%3D75px%26background%3Dhttps%253A%252F%252Fimages.unsplash.com%252Fphoto-1445375011782-2384686778a0)