Vue Fes Japan 2022 の発表内容です https://vuefes.jp/2022/sessions/KushibikiMashu ■ 概要 社内のコンポーネントライブラリに対してStorybookとChromaticでビジュアルリグレッションテストを導入して、見た目のデグレを防止している話をします。 ■ 詳細 Chromaticとは、Storybookのメンテナーが作成しているStorybook用のツールです。 ストーリーごとのスクリーンショットを撮影し、差分を画像で比較してくれる機能を備えています。 以下の課題を解決することを目的にして Chromatic を導入しました。 既存のコンポーネントを改修した際に発生する DOM、CSS に起因する表示崩れを自動で検知できないこと 依存モジュールのバージョンアップに時間がかかること その結果、両方の課題を解決できた上に作業が
![共通コンポーネントのテスト実装方法にあえてVRTを選択した話 / why do we choose VRT for testing shared components](https://cdn-ak-scissors.b.st-hatena.com/image/square/431e4b104c0f4c9347bb0aa054fc4f64451a4a42/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F05111818d0c14e24ae1eef6d5b59a512%2Fslide_0.jpg%3F23052477)