Chromaticとは

Storybookのドキュメント公開、UIテスト、UIレビューの仕組みを提供してくれるサービス

Chromaticの機能紹介

Storybookドキュメントの公開

ビルドされたStorybookはGitのコミット単位で記録されます。
つまりStorybookのバージョン管理が行なえます。

UIテスト（ビジュアルテスト）

ChromaticはStory毎にスナップショットを撮影し、自動で前のスナップショットとの差分をチェックします。
もし差分があればそれについてレビューを行い、変更が正しいことを確認します。

Chromaticの導入

主にこちらの資料を参考に（ほぼそのままですが）まとめました

1. chromaticにプロジェクトを連携

とりあえずログイン。利用したいプロジェクトがあるアカウントでログインしてください。

プロジェクトを選択すると以下のような画面が表示されます。

プロジェクトトークンは後で使うのでメモっておきましょう

2. プロジェクトにchromaticをインストール

次のコマンドでchromaticをインストールします。

npm install --save-dev chromatic

3. chromaticへのデプロイコマンドを実行

chromaticの画面に表示されていたトークンでchromaticコマンドを実行します。
このコマンドはstorybookのビルドからchromaticへのデプロイ、UIテストまでを行ってくれます。

npx chromatic --project-token=xxxxxxxxx

途中chromatic scriptを追加するかの質問が出ます。
これは"chromatic": "npx chromatic --project-token xxxxx"のようなscriptがpackage.jsonに生成されます。
特に必要性を感じないならトークンはクレデンシャル情報なので入れないほうが良いでしょう。

chromaticのプロジェクトページを確認するとビルドされた結果が表示されます。（以下は初回デプロイ後の表示です）

chromaticコマンドに失敗？

chromaticコマンドは初期設定ではUIテストを自動で実行し、差分があるとエラーを返します。（多分CI用）
デプロイ自体は成功しているので、chromaticのWeb画面を開いてUI差分を確認しましょう。

4. CIの設定（GitLab）

以下は.gitlab-ci.ymlに記述する最小限のジョブです。
ただしproject-tokenはクレデンシャルなので環境変数で指定するほうが良いでしょう。

chromatic_publish:
  image: node:14
  script:
    - npm install
    - npx chromatic --project-token=$CHROMATIC_TOKEN --exit-zero-on-changes

--exit-zero-on-changesは「chromaticコマンドに失敗？」で紹介した差分による失敗を無効にします。

GitLab以外のCIについてはこちらを参照
https://www.chromatic.com/docs/gitlab