storybookのVRTでChromaticを試す

始めに

VRTは色々なやり方があると思いますが、storybookのVRTはstorybookで勧められているものを使った方が楽に設定できるかなと思い、公式で勧められているChromaticを試してみました。

https://storybook.js.org/docs/react/writing-tests/visual-testing

導入

詳細は公式に譲りますが、書かれていた通りにしたらさくっとできました。

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

CIの設定も丁寧に書かれているので、特につまづくことなくできました。

https://www.chromatic.com/docs/github-actions

ただ個人的には差分があった時はfailになっていた方が良さそうなので以下のようにexitZeroOnChanges: falseをつけています。

chromatic.yml

 name: 'Chromatic'

 on: push

 jobs:
   chromatic-deployment:
     runs-on: ubuntu-18.04
     timeout-minutes: 10

     steps:
       - uses: actions/checkout@v2
         with:
           fetch-depth: 0
       - uses: actions/setup-node@v2
         with:
           node-version: '16.15.1'
           cache: yarn

       - name: Install dependencies
         run: yarn install

       - name: Publish to Chromatic
         uses: chromaui/action@v1
         id: chromatic
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          exitZeroOnChanges: false

運用のイメージ

上記のGitHub Actionsが動いた後に、ChromaticのCIも動き出し、以下の3つのステータスが出てきます。

• UI Review
  • UI変更についてのレビュー
• Storybook Publish
  • storybookがpublishされたか
• UI Tests
  • UIが変更されたか確認（UI Reviewと結構被っており、実装者側確認用？）

上記のようなステータスが出るため、以下のような運用が良いのかなと思っています。

レビューイ側

普段通り開発し、差分が出た時にGitHub Actionsでエラーになります。

Detailsに飛んで確認URLに飛びます。

Review Changesに飛びます。

Diffを見ながらAcceptを押していきます（誤った変更であればコードを修正してください）

全てAcceptしたらGitHub Actionsを再度実行してください。

GitHub ActionsがPassして、かつChromaticのUI TestsもPassされていたらOKです（UI ReviewはPending状態にしてレビュワーに見てもらいます）

レビュワー側

差分が出ている場合、ChromaticのUI Reviewがpending状態になっているのでDetailsに飛びます。

Changesetに飛びます。

diffを確認して問題なかったらApproveします。

PRページで全てPassになっていたらOKです。コードも問題なければGitHub PullRequestの方もApproveしてください。

使って見て気になったところ

実際に運用までできていませんが、軽く試してみて気になったところをいくつか挙げます。

PendingステータスがCI稼働中と勘違いしそう

Chromaticが出すステータスはApproveが出ない限りPendingステータスになります。したがってタブのステータスやコミットのステータスはPendingのままになり、「まだCIが終わっていないのかな？」という勘違いをしてしまいそうだなと思いました。なので少しでも対応が必要になっていることが気づくようにexitZeroOnChanges: falseをつけてfailedになるようにしました。

PR上のステータスをよくよくみるとアイコンは稼働中は周りがクルクル回って、progressという文言に対し、ChromaticのPendingはクルクル回っておらず、文言もpendingになってはいて違いは一応ありますが、まぁ気づかないですよね(汗)

フローが若干複雑

運用イメージを見てわかるかと思いますが、意外といろんなところに飛んでApproveする必要があります。Chromatic側でもコメントできますが、逆にGitHub上のコメントと分散してしまうのでオーバーな感じがしました。

その他検証

差分検出時にPR上にコメント出す

以下の記事のようにChromaticに関する情報をPR上にコメントを出すことができるようです。

https://zenn.dev/matken/articles/chromatic-preview-comment

ただプレビューURLはStorybook PublishのDetailsのところを飛べば見れますし、労力に合っていないように感じました。

何件diffがあったかコメントで見れるなら良いかなと思ったのですが、残念ながらその情報は取得できなそうなので、特に対応しませんでした。

https://github.com/chromaui/action#outputs

まとめ

以上がChromaticを試してみた内容です。pendingステータスのままになってしまうのが結構ネックだなと僕は感じていて、他の方法を探そうかなと思っています。サービスなしだとjest-image-snapshotを使うやり方があるようなので、今度そちらの方も検証したいと思います。
最後に今回の検証では以下のレポジトリで試しており、他の検証でも使ってコードが色々混じっていますが、興味ある方はご参照ください。

https://github.com/wintyo/storybook-react