Flutterのゴールデンテストについて

ゴールデンテストとは

ゴールデンテストとは、画面の描画結果を画像（ゴールデンファイル）として保存し、
テスト実行時に現在の描画結果と比較することで差分を検出するテスト手法です。

通常のテストではロジックの正しさを確認しますが、ゴールデンテストではUIの見た目そのものを検証します。
これにより、以下のような問題を検出できます。

レイアウトの崩れ
余白やサイズの変更
色やフォントの変更
コンポーネントの表示有無の変化

特にFlutterのようなUI重視のフレームワークでは、見た目の品質を保つために有効な手法です。

ゴールデンテストの実装例

ゴールデンテストは、Widgetテストをベースとして作成し、
描画結果と事前に保存した画像（ゴールデンファイル）を比較することで検証を行います。

以下は簡単な実装例です。


import &#039;package:flutter_test/flutter_test.dart&#039;;
import &#039;package:flutter/material.dart&#039;;

void main() {
  testWidgets(&#039;ゴールデンテストの例&#039;, (WidgetTester tester) async {
    // テスト対象のWidgetを描画する
    await tester.pumpWidget(
      const MaterialApp(
        home: Scaffold(
          body: Text(&#039;Hello World&#039;),
        ),
      ),
    );

    // 描画結果とゴールデンファイルを比較する
    await expectLater(
      find.byType(Scaffold),
      matchesGoldenFile(&#039;goldens/sample.png&#039;),
    );
  });
}

コードのポイント

pumpWidget()
→ テスト対象のUIを描画します
matchesGoldenFile()
→ 指定した画像ファイルとUIを比較します
差分がある場合
→ テストが失敗し、UIの変更に気づくことができます

ゴールデンテストの実行手順

ゴールデンテストは、通常のテストコマンドで実行できます。

① 初回実行（ゴールデンファイルの作成）

初回は比較対象となる画像が存在しないため、以下のコマンドで画像を生成します。

flutter test --update-goldens

このコマンドを実行すると、
テストコードで指定したパス（例：goldens/sample.png）にゴールデン画像が作成されます。

② 通常実行（差分チェック）

ゴールデン画像作成後は、以下のコマンドでテストを実行します。

flutter test

この実行では、

現在のUI描画結果
保存されているゴールデン画像

が比較され、差分があればテストが失敗します。

③ UI変更時の更新

仕様変更などでUIを意図的に変更した場合は、
再度ゴールデン画像を更新する必要があります。

flutter test --update-goldens

このコマンドにより、新しいUIの状態がゴールデンとして再保存されます。

実行の流れまとめ

テストコードを作成する
--update-goldens で画像を生成
通常の flutter test で差分チェック
UI変更時は再度ゴールデンを更新

ゴールデンテストの実用性

ゴールデンテストを実際に使用してみて、以下の点で実用性が高いと感じました。

視覚的な差分を確認できる → テキストだけでは分かりにくいUIの違いを検出できます
デグレ（意図しない変更）の防止 → UI変更の影響範囲を自動チェックできます
レビューの補助になる → コードレビューだけでは見逃しやすいUIの違いを補えます

一方で、以下の点には注意が必要です。

画像ファイルの管理が必要
意図的な変更時はゴールデン更新が必要
環境差による差分が発生する場合がある

そのため、目的を限定して使うことが重要だと感じました。

まとめ

ゴールデンテストは、UIの見た目を画像として比較することで、
画面の変更や不具合を検出するテスト手法です。

Flutter開発においては、

UI品質の維持
レイアウト崩れの防止
デグレの検出

といった点で有効に活用できます。

今後は、重要な画面や変更頻度の高いUIに対してゴールデンテストを適用し、
品質の高いアプリ開発につなげていきたいと考えます。