ビジュアルリグレッションテストを簡単に導入できるChromaticを触ってみた
はじめに
表題通り、ビジュアルリグレッションテストを簡単に導入できるChromaticを触ってみたので、所感を書いていこうと思います。
結論から言うと、簡単に導入できてUIもよく実用的です。
Chromaticとは
ChromaticはStorybookのデプロイ、UIテスト、UIレビューができるサービスです。
Storybookのメンテナによって作られています。
Storybookのデプロイ
Storybookをセキュアな環境にデプロイすることができます。
過去ブランチやコミットごとにその時点のStorybookを閲覧できるのは意外に便利かもしれません。
また自前でやるのは意外に大変なアクセスコントロールも簡単に設定できるようなので、便利そうです（プライベートリポジトリのみ）。
UIテスト
Storybookをデプロイするだけでビジュアルリグレッションテストも自動で行われます。
CIに組み込むことでプルリクごとのビジュアルリグレッションテストも可能です。
UIレビュー
UIテストに差分がある場合、UIレビュー（UIテストの差分を承認、否認する）を行うことができます（設定でオフにもできます）。
指定した人をアサインしたり、UIに対してコメントを付けたりすることができるようです。
UIレビューの状況がプルリクのステータスに反映されるので、開発フローにUIレビューの工程を自然に導入できそうです。
導入手順
公式のGET STARTEDが非常にわかりやすいです。
やることをざっくり書くと、
- ローカル環境の任意のブランチからStorybookをデプロイ
- CIの設定（CIに組み込みたい場合）
の2つだけなので1時間程度で導入自体はできると思います。
あとはドキュメントを読みながら各機能を触ってみるのがよさそうです。
おわりに
ビジュアルリグレッションテストを簡単に導入できるので、それだけで価値があるように思いました。
STARTER Planが$149/moとそこそこしますが、Free Planなら5000枚/月までスナップショットを撮ることができます。
ただしCIに組み込む場合はpushの度に実行されるように設定することが推奨されており、スナップショットの消費ペースはそこそこ早いので、個人開発などの小規模プロジェクトでないとFree Planには収まらないかもしれません（特定のStoryを対象外にすることは可能でした）。
Discussion