Storybook v8.3で進化するコンポーネントテスト手法：Vitestプラグインの実力
はじめに
コンポーネント駆動開発において欠かせないツールとなっているStorybookですが、最新のv8.3では新たにVitestプラグインが導入され、テストの方法が大きく進化する気配を感じました。この記事・動画では、Vitestプラグインがもたらす新たなテストアプローチとその利点について見ていきます。
Storybookを活用したテストに関しては前回の記事でも触れました。
記事では概要を紹介し、もし気になるトピックがあれば動画を見ていただけたらと思います。
Vitestプラグインの概要
「堅牢なテスト手法」を共有したつもりが、数日後にStorybook8.3が発表されてVitest Pluginが登場して、黒船感がちょっとあります。
「StorybookのInteraction Testは微妙」と言っていたのが「StorybookのInteraction Test最高か」に変わりそうです。
Storybookの従来の test-runner を使用するアプローチとは異なり、このプラグインはStoryを直接Vitestのテストに変換し、さらに、Playwrightと連携することで、実際のブラウザ環境でレンダリングとテストを行うことができます。
主な機能としては以下が挙げられます：
Interactionテスト：ユーザーアクションをシミュレートし、コンポーネントの動作を検証
InteractionテストはもともとStorybookにあったテスト方法です。
出た当初は「めちゃくちゃ良さそう！」と思っていたのが、実際に使ってみると「自動テストに組み込むのがむずい」となってお蔵入りになっていました。それが今回Vitestと連携したことで、今まで実行してきたVitestのテストと同様に実行されるようになったのです！
カバレッジレポート：テストのカバレッジ状況を可視化
当たり前といえば当たり前かもしれませんが、Vitestで実行できることでStorybook経由でカバレッジも確認できるようになりました。最近のInteraction Testはtest-runnerでもできているのかもしれませんが、カバレッジを一定の指標として使えるのはうれしいですね。
VSCode拡張機能連携：VSCodeから直接Vitestの拡張機能を使ってテストの実行が可能
VitestのVSCode拡張機能がそのまま stories のファイルでも使えて、Interaction Testをエディタから即座に実行することができます。めちゃくちゃ便利です。
テストのデバッグ：失敗したテストのStoryにすぐに飛べる
そして、なんとテストに失敗するとStoryのURLが表示されており、そこから対象のストーリーにすぐに遷移することができます。このあたりの開発者体験、かなり良いです。
従来のテスト方法との比較
Vitestプラグインは、従来の test-runner を使用する方法と比較して、いくつか重要な利点があります：
- Storybookインスタンスの事前起動が不要
- Storyを直接Vitestのテストに変換するため、別途でJestが不要となった
特に注目すべきは、テスト実行速度の大幅な改善です。VitestのBrowser ModeでPlaywrightが使われているのですが、びっくりするほど速いです。
まとめ
Storybook v8.3のVitestプラグインは、コンポーネントテストの方法を大きく改善し、開発者の生産性向上にも大きく貢献すると思いました。実際のブラウザ環境でのテスト、高速な実行、充実したデバッグ機能など、多くの利点を提供してくれます。
Storybook Vitest Pluginには今後も大きく期待していきたいですね！
Discussion