Zenn
📸

Storybook v8 Visual TestsでChromaticのVRTを導入してみた

2024/05/27に公開
React
Storybook
TypeScript
Chromatic
mockdate
tech

はじめに

Storybookがv8になって、localのStorybook上でChromaticのVRTが行えるVisual Testsを導入してみました。
今回はその導入背景やVisual Testsの使用感をお伝えしていきたいと思います。

導入した背景・課題

デザインシステムの共通コンポーネントのUI変更があった際どこのコンポーネントに影響範囲が及んでいるかの検知をVRTを通して素早く検知・確認したく今回Chromaticを導入しました。

ただ、Chromaticは無料枠だとスナップショットの枚数が毎月5000枚までしか利用できないのでなるべくコストをかけたくないですよね。
Starterプランでも$149/月（約21,000円）と料金が高い。
CIに乗せると1commit毎にSnapshotを取ってしまい枚数の上限を超えてしまう懸念があったので、
ローカルで差分出力したい時にだけ使う目的で、Visual Testsを導入しました。

VisualTests導入・設定

Chromaticの導入

基本的な導入については公式サイトや技術記事が参考になるので割愛します。

https://www.chromatic.com/docs/

https://zenn.dev/fullyou/articles/3b2d1bd1e6ce79

Storybook上でVisual Testsの設定方法

前提

  • Chromaticが既に導入されている中で説明していきます
  • storybook v7.6以上から対応可能

だいたい公式サイトに記載されていることの内容です

まず@chromatic-com/storybookを導入

npx storybook@latest add @chromatic-com/storybook

chromatic.config.jsonの設定

chromatic.config.jsonを設定しているmainやpreviewを纏めている./storybookの隣に作成。

こちらで、ChromaticのProjectId、debugモードなどを設定します。

設定例（chromatic.config.json）
{
  "projectId": "Project:******************",
  "zip": true,
  "debug": true,
  "buildScriptName": "build-storybook",
  "onlyChanged": true,
  "storybookBaseDir": "packages/ui",
}

筆者が主に使ったオプション

  • onlyChange: 前回分のVRTの差分のみを出力したい場合は、onlyChangedを設定することで差分のみが出力
  • buildScriptName: VisualTestsを実行させる時に、storybookをbuildする必要があるので、コマンド名をカスタムしている場合は指定が必要
  • storybookBaseDir: Monorepoでやっている場合は、参照されるディレクトリ構造が通常と異なる場合は指定が必要
  • debug: 実行ログであるchromatic.logの生成

またその他のOptionも以下のドキュメントに記載されています。

https://www.chromatic.com/docs/cli/#configuration-options

実際に使ってみる

設定を終えると「▶️」のボタンが表示され、VRTを実行できます。
（Visual Testsのパネルでも実行可能）

onlyChangedを設定していると前回Build分の差分を比較し、ButtonのSecondaryのテキストを「Button → ボタン」と変更してみると赤枠で囲っているVisualTestsに差分が出ていることが分かります。
（ちょい分かりづらいですが、）

また、どれだけStoryの差分があるかも左下に表示したりどこのStoryに差分があるか薄黄色になっています。

image.png

ちなみにChromatic上でもVRTの出力がされていることが確認できます。

image.png

工夫した点

mockdateを使った日付の固定

onlyChangedを扱っている上でVRTを行う時、new Date()を使ってコンポーネントを表示しているStoryがある場合、日を跨ぐ毎に日付がずれて余計な差分を生んでしまうことがあります。

その場合は、mockdateを使用してStorybook上の日付を固定しました。

固定方法はpreview.tsに固定したい内容を定義するだけで良いです。

preview.ts
import MockDate from 'mockdate';

///
MockDate.set(new Date('2024-04-01T00:00:00'));

const preivew = {
///

};

export default preview;

現状CIには載せていない

無料枠の中でChromaticを利用するにあたり、今携わっているPJのStory数が180近くあり1commit毎にSnapShotを取るとなるとあっという間に5000枚超えると思い現状はローカルのVisualTestsだけにしています。
もしCIに乗せる場合も特定のコンポーネントの変更時にTriggerを限定的にしてうまくコスト管理する手法はありそうですが、UITestsがpennding状態になり続けるのでCIが完了していないと勘違いしていましたが、最近autoAcceptChangesでcompleteにできることに気づき検討ありでした。

まとめ

  • StorybookのVisualTestsでローカル上でもVRTが可能に。
  • onlyChangedで前回差分のものだけ出力可能
  • 日付を固定させたい場合は、mockdateおすすめ

Discussion