Chromatic (w/ Storybook)の画像系Flakyを解消した話

Chromatic

ChromaticはUIコンポーネントのビジュアルテストとレビューに非常に便利なツールですが、Flakyな差分が発生することがあり初めて使用する人にとっては悩ましいポイントとなります。

ウォンテッドリーでも同じ問題を経験していたところ、Chromaticのドキュメントに画像系Flaky差分を解消できる推奨設定を見つけました。

ウォンテッドリーでのFlaky差分の例：

• 原因1：画像が複雑

• 原因2：外部画像を正常に取得できない（これは実際の差分です）

Avoid external resources

https://www.chromatic.com/docs/resource-loading/

It’s tough to predict network stability third-party hosting reliability. These factors mean external resources might not load predictably and affect your snapshots.

We recommend adding resources to your Storybook or using a reliable placeholder service. This also makes your builds run faster.

Chromaticのドキュメントでは、外部リソースの使用を避けることを推奨しています。

外部リソースはネットワークの安定性やサードパーティホスティングの信頼性に依存するため、予測不可能な読み込み問題がスナップショットに影響を及ぼすことがあります。

ドキュメントによるとリソースをStorybookに追加するか、信頼できるプレースホルダーサービスを使用することを推奨しています。これにより、ビルドの速度も向上します。

Chromatic推奨のプレースホルダーサービスを見つけ、既存のプレースホルダーを https://placehold.co/ のものに入れ替えました。

また、Storybookでの画像が実際の人物やロゴ、カバー画像である必要はないと判断し、すべてのプレースホルダー以外の画像もプレースホルダーに置き換えました。

その結果

その結果、不要な差分が出なくなり作業が楽になりました。この軽微な改善により、メインの作業により集中できる環境が整いました。