UI開発のためのフロントエンドワークショップ、Storybookはバージョン9を正式にリリース、Vitestとのコラボレーションを通じたテストの改善、パフォーマンス最適化と開発者エクスペリエンスの包括的向上のためのよりフラットな依存構造などのコアアップグレードが導入された。
Storybookバージョン9はバージョン8で実装されたテスト機能の上に構築され、ビルトインビジュアルテストや「Storybook Test」と呼ばれる新機能セット導入のためのVitestとのパートナーシップなどの新機能を提供する。
Storybook Testは、新しいテストウィジェットからすべてのストーリーに対して一斉にテスト開始できるようになっており、ローカル開発フィードバックループ拡張のためのファイルを一度保存すると自動的にテスト開始するウォッチモードも備えている。主にコンポーネントテストに焦点を当てており、コンポーネントをテストするための3つのカテゴリ：インタラクション、アクセシビリティ、ビジュアルテストを実装している。これらのテストはローカル開発環境（Storybook UI経由）やデリバリーパイプライン内で実行可能だ。
インタラクションテストは、以前からStorybookの一部だが、以前は個々のストーリーに対するタブとしてのみ利用可能だった。現在はすべてのストーリーに対して一度にテスト実行できるようになり、サイドバーで全体の実行状況を確認できるようになった。
アクセシビリティテストは、業界標準axe-coreツールを利用してチェックするStorybookアクセシビリティアドオンを通してStorybook内で実行できる。WCAG標準への違反はStorybook内で直接検出され、アクセシビリティタブのコンポーネントに対して表示される。
ビジュアルテストは、コンポーネントに対するビジュアルスナップショットテストを実行するためにChromaticによって提供される。これもサイドバーの新しいテストウィジェットを通じて実行可能だ。
新しいテストウィジェットはStorybookの左側のナビゲーションに表示され、インタラクション、アクセシビリティ、ビジュアルテストの全体的なビューを提供し、開発者がすべてのコンポーネントに対してフルテストスイートをワンクリックで実行可能にする。これに加えてテスト実行のカバレッジレポートへの簡単なルートも提供する。
Storybook 9はテストの改善に加えてSvelte 5のサポートなどの多くの追加機能を備えており、それに伴いストーリー内でRunesやSnippetsのような言語機能のサポートが提供される。React Nativeのサポートも追加されており、一部のユーザーは今回のリリースの最大の機能の一つと見なしている。
新しいViteを使ったNextJSプラグインがStorybook 9と共に出荷される。これはWebpackベースのバージョンと同じ機能をサポートしているが、Storybook TestおよびVitestと完全に互換性のあるViteバージョンを提供する。
このリリースの一部としてコアアップグレードには、著者によれば48％の軽量化を実現し、インストール時間を短縮するという、フラットな依存構造が含まれている。Blueskyでの質問でこれが「プリバンドリング」によって達成されたのかという懸念が提起され、コンシューマーアプリケーションによる依存関係のパッチ適用が妨げられる可能性があると指摘された。Storybookの貢献者 Jeppe Reinhold氏はいくつかのケースでプリバンドリングが行われていることを認めたが、ほとんどの改善は依存関係の削除または置換によるものであると説明した。
StorybookはUIコンポーネントの開発、テスト、ドキュメント作成のためのオープンソースツールである。React、Vue、Angular、Svelteなど多くの一般的なUIライブラリをサポートしている。完全なリリースノート、セットアップガイド、および移行ツールはstorybook.js.orgで利用可能だ。