Storybook 10 で Storycap が動かなかった話

今回のお話のサイト

Storybook を導入したので、次のステップとして reg-suit と組み合わせた VRT 環境を整備しようとしていました。

で、今回スクリーンショット撮影のツールとして Storycap を使用することになりました。

他にも Chromatic などが候補に挙がりましたが、月 5000 枚以上のスナップショットが有料になります。

まぁ、そこまでいくことはないかな？とは思いつつも、念のため無料で完結する Storycap を選ぶことにしました。

Storycap とは

Storycap は Storybook のストーリーをもとにスクリーンショットを撮影するツールです。

reg-suit と組み合わせることでコンポーネント単位の差分を視覚的に確認できる VRT 環境を作れます。

前職でこの構成を使っていたので今回も同じように導入しようと考えていました。

インストールの調査中に「Storybook 8 までのサポート」という記載を見つけ、 Storybookは10 を使っているから少し不安だなーと思いましたが、インストールも問題なく出来たし、とりあえず試してみるかーってことに

実際に動かしてみると、最初はキャプチャがちゃんと撮れていて「バージョン違っても大丈夫だったか！」と思っていました。

ところがなぜか途中で処理が止まっている。。。？

で、キャプチャを見てみるとアクセスセクションのキャプチャが撮れていない？？？

あーこれは Google マップの iframe が原因かな？と思い、試しに iframe を取り除いて実行してみたところ、正常にキャプチャできてテストが終わることを確認できました。

とりあえず原因はわかったので、iframe にクラスをつけてスタイルで非表示にしたり、キャプチャ対象から除外する方法をいろいろ試したものの、iframe があるとやはりフリーズしてしまいます。

エラーも出ずにただ止まるだけなのでなにもできない。。。

あーこれは万策尽きたーーーーー！

ってことで代替ツールを探すことにしました。

「Storybook 10 対応、Storycap の代わりになるもの」という観点で探したところ @storycap-testrunというパッケージを見つけました。

@storycap-testrunは reg-viz という組織が開発しているツールです。

実は reg-suit も Storycap も同じ reg-viz 製で、今回の VRT 環境で使っているツールはすべて同じチームが作っているということになります。調べて初めて気づきました。

VRT に必要なツールをひとつの組織で一貫して作り続けてくれているのはありがたいですし、Storybook のバージョンアップに合わせて新しいパッケージを出してくれているのも助かります。

Storycap の「ブラウザのレンダリングが安定したタイミングでキャプチャする」というアプローチを継承しつつ、@storybook/addon-vitest を使った Vitest ブラウザ環境に対応した新しいパッケージです。

Storybook のバージョンが上がるにつれてテスト環境が Vitest 方向に移行してきたことへの対応として作られたツールで、Storycap の後継ポジションに近い存在です。

ちなみに調べている中で、iframe 問題は Storycap 開発者自身も「あまり考えてなかった」と言及していたことがわかりました。珍しいケースではなく、既知の問題だったようですね。

あ、Storybook 10との相性問題じゃないんだ(；・∀・)

@storycap-testrunに切り替えたところ、iframe を含むコンポーネントも含めて問題なく動作しました！！！

Storycap が動かなかったのは残念でしたが、調べていく中で reg-viz というチームの存在を知れたのは収穫でしたね。

その後 reg-suit との組み合わせも問題なく動作し、PR に差分レポートを通知する仕組みまで整えることができました。

ただ、VRT の基盤は整ったものの、まだまだ課題が残っています。

このあたりを解決して完成形に近づけていく予定です！