precena_engineer https://blog.hatena.ne.jp/precena_engineer/ Precena Tech Book https://tech-book.precena.co.jp/ ソフトウェア開発 フロントエンド React ビジュアルリグレッションテスト（Visual Regression Test）とは ビジュアルリグレッションテスト（以下、VRT）は、画像回帰テストとも呼ばれます。 VRTは、改修による予期せぬ UI のデザイン崩れを検出することを目的としています。 UIのスクリーンショットを撮り、それらをコミット間で比較して、変更を特定します。 Storybookの運用イメージ 当社のReactを利用したプロジェクトではデザインシステムの構築にStorybookを利用しています。 細かい運用はこの記事では割愛しますが、見た目上のバリエーションが存在するコンポーネントについては、1つのコンポーネントにつき下記… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Ftech-book.precena.co.jp%2Fentry%2Fsoftware%2Ffrontend%2Freact%2Fvisual_regression_test_with_storybook" title="Storybookを利用したビジュアルリグレッションテスト - Precena Tech Book" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/p/precena_engineer/20250617/20250617132907.gif Hatena Blog https://hatena.blog 2023-09-29 00:00:00 rich https://tech-book.precena.co.jp/entry/software/frontend/react/visual_regression_test_with_storybook 1.0 100%