Storybook8になって変化したことをまとめ #storybook

Storybookのバージョンが8になりました！
すでにバージョンアップに対応された方も多いかと思いますが…先日8.1がリリースされました！

バージョンアップ後のStorybookの変化についてまとめました！
知識のアップデートにお役立ていただけると幸いです！

【注意】
この記事は下記の2つのURLをまとめたものです。
すでに一読された方には新しい発見のない記事なのですぐにリーディングをやめて別の記事を読んでください！

Storybook8になって変わったこと

StorybookのUIが改善されたり、ビルドが高速化されたりしましたが、なんといっても

の2点だと思います。

これまではChromaticと連携するなどで実現していたビジュアルテストですが、StorybookのUIからテストを実行できるようになりました。

現時点でChromaticを利用しているプロジェクトにとって大きく作業効率を上げることにつながるか定かではありませんが、UIから実行できるのは開発体験として良いと思います。
UIをレビューし、コメントを残したい場合にはChromaticを引き続き利用する必要があります。

実験的なサポートであると発表されているので今後の動向には注意が必要です。
とはいえ8.1ではサーバーコンポーネントのユニットテストができるようになったとのことでよりRSCに対してのサポートは進んでいきそうな空気感は感じております。

docgen（コンポーネントの分析に利用されるライブラリ）がアップグレートされました！
storiesファイルがほとんど何を書かなくてもコンポーネントに正しく型定義されていれば認識してくれるので非常に嬉しいです。

CSF3に変わったあたりからdocgenの認識能力が上がったことにより、storiesファイルの記述がスッキリした印象です！

8.1での目玉は、モジュールモックの追加とPlaywrightとの連携だと思います。
React19の実験的なサポートとNext.js14.2をサポートもアップデートの内容に盛り込まれてました。

これまで困難だったモックの実装ができるようになったそうです。
例えば、

などが該当します。

これまでは「Mock Service Worker」を利用していたところをMocking modulesを利用すれば無理な実装をせずに済む場合も出てくる可能性もありそうですね！

導入されたモジュールモックで依存するサーバーモジュールをモックすることでRSCのユニットテストができるようになるそうです。

Playwright CT のポータブルストーリー API は実験段階です。Playwright CT 自体も実験段階です。今後のリリースでは、どちらのライブラリにも重大な変更が発生する可能性があります。

とドキュメントには書かれているのでまだどうなるかわからないので今後に期待ですね！

Storybook8になってconfig周りの設定が楽になったり、テスト周りの自動化や選択肢が拡充された印象です。

実験的な実装もあるので今後どうなるかわからない部分もありますが今後の動向が楽しみです！

Storybookをまだまだ理解できていない部分が多いので今後もアップデートをキャッチアップしながらデザイナーとの連携部分やUIテスト周りの強化できるように努めていきたいと思います！