ビジュアルリグレッションテスト（VRT）
画像キャプチャを取得し比較することで差分を検出する方法
リグレッションテストはhtmlを生成して確認するものだけど、cssなど装飾系はcss moduleを使っていたりすると表示されない。
そのため共通UIのcssを変えた時に他の画面に影響がないかを確認できない
どうやってやるか？
Chromiumなどのブラウザをヘッドレスモードで動作させることで実施する
E2Eフレームワークに含まれていることがほとんど
reg-cliを使ったローカルテスト
storycapを使ったstorybookでのテスト
手法
ページ単位のキャプチャを行う。
変更は非常に大まかなもの
例えば余白を追加するとそれ以外の部分は全て差分として表示されるらしい。
試してないけどおそらくgitの差分みたいな形で検出できないのかも。
UIコンポーネント単位キャプチャ
中程度のUIコンポーネントだと影響範囲が少なく差分がわかりやすい。
storybookでコンポーネント単位でstoryを作成しているとテストとして活用できる。
何が嬉しい？
リファクタリングする際に安心感がある。
どの部分が変更されているかがわかると、使われているかどうか分からないグローバルcssを変える際に差分がわかるから修正箇所がわかりやすい
cssからscssに移動させるとかそういう移行作業の際に便利
PRで自動で差分検出できるとレビューわーの確認もしやすい
基本的に、装飾のテストをするものになるから、開発初期段階で効力を発揮するってものではなさそう。
ただ、storybookにコンポーネントを登録しておいたりとやっておくと後に効いてくる
そのためstoryは作成しておいた方が良さそう。