React Native StorybookのVisual Regression Testingを導入する

[hirokisakabe]

Status: Draft
Depends on: #268

概要

React Native Storybookのstoryをネイティブ環境で撮影し、承認済みbaselineとの差分から意図しないUI変更を検出するVisual Regression Testing（VRT）を導入する。

背景 / モチベーション

• Jestはコンポーネントの振る舞いを検証できるが、レイアウト、色、サイズ、重なりなどの視覚的な回帰を検出できない
• Webブラウザ上のReact Native Webでは、iOSのLiquid Glassなどnative固有表現を十分に検証できない
• React Native Storybookには組み込みVRTがないため、Maestro、Sherlo、Lokiなどの外部手段とbaseline運用を選定する必要がある

Ready にするための未決事項

• VRT実行基盤をSherlo、Loki、Maestro + image diffなどのどれにするか
• 初期対象platformをiOSのみとするか、iOS/Android両方とするか
• baseline画像をGit管理するか外部サービスで管理するか
• 差分の確認・承認をGitHub PR、外部サービス、手動artifact確認のどこで行うか
• 初期VRT対象とするstoryと端末サイズをどこまで含めるか

受け入れ条件

• 選定したnative環境・端末条件で対象storyのスクリーンショットを再現可能に取得できる
• 取得画像が承認済みbaselineと自動比較され、許容範囲を超える未承認差分でチェックが失敗する
• PRから差分画像、baseline、新規画像を確認できる
• 意図した変更だけを明示的にbaselineへ反映する承認手順がある
• animation、日時、safe area、font、端末サイズなど差分を不安定にする要因が固定または無効化されている
• light/darkの対象範囲が決定内容どおりに検証される
• VRTの実行・差分確認・baseline更新手順が開発ドキュメントに記載されている
• 既存のJest、lint、typecheckと通常のMobile buildが成功する

実装方針

• React Native Webではなく、SimulatorまたはEmulator上のNative Storybookを撮影する
• Storybookのstory IDとfixtureを再利用し、アプリのAPIや認証状態へ依存しない
• 初期対象を視覚的リスクの高い少数storyへ絞り、安定性を確認してから拡張する
• pixel diffの閾値で問題を隠さず、まず非決定的要因を除去する

スコープ外

• Storybook自体の導入と初期story作成
• ログインからタスク操作までのE2E機能テスト
• Web版のChromatic導入
• AIだけによるデザインの良否判定
• 全端末・全OSバージョンの網羅

参考

• MobileにReact Native Storybookを導入する #268
• https://storybookjs.github.io/react-native/docs/intro/testing/
• https://storybook.js.org/docs/8/writing-tests/visual-testing