🌎

FlutterでGoldenTestを試してみた

2021/10/18に公開

Flutter

Test

golden

tech

GoldenTestとは

WidgetTestの手法の一つになります。

いわゆるFlutterのWidget TestとGolden Test比較すると、

Widget Test　-> WidgetTreeを確認
Golden Test -> 画像を確認

となります。

従って、Golden Testの特徴としてはこんな感じになります。

ユーザーが使用する画面そのものをテストできる
速い（らしい）
画面サイズが変わっても対応できる

なんといってもユーザーが使用する画面そのものをテストできるのはメリットがあると思います。

例えば、WidgetTree上ではTextがきちんと表示されているけど、実際は文字が隠れちゃっているなんてことが有りうるからです。（画像の字が小さくてすみません・・・・）

文字が隠れている	文字が全部表示

メリットを分かってもらえたところで、簡単なGoldenTestをやっていきます。

GoldenTestの手順

今回はカウンターアプリでWidgetのカラーが違う場合をテストします。
ライブラリーはgolden_toolkitを使います。
https://pub.dev/packages/golden_toolkit

1.　dev_dependenciesにgolden_toolkitを追加
2.　testフォルダにgolden_test.dartを作成
3.　golden_test.dartを編集
4.　Golden作成（マスターのスクリーンショット作成）
5.　実際にテストしてみる（OK編）
6.　実際にテストしてみる（NG編）

今回のソースコードはGithubにおいてあるので詳細気になる方は見てください。

dev_dependenciesにgolden_toolkitを追加

pubspec.ymalにgolden_toolkitを追加してpub getしましょう。

pubspec.yaml

dev_dependencies:
  flutter_test:
    sdk: flutter
  golden_toolkit: ^0.11.0

testフォルダにgolden_test.dartを作成

ファイル名はgolden_test.dartでなくても良いです。

golden_test.dartを編集

中身を編集していきます。

golden_test.dart

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:golden_toolkit/golden_toolkit.dart';
import 'package:flutter_golden_test_demo/main.dart';

void main() {
  testGoldens('app', (WidgetTester tester) async {
    //デバイスの画面サイズ
    final size = Size(415, 896);
    
    //第一引数はどのWidgetをビルドするのか指定、どのサイズにビルドするかがsurfaceSize
    await tester.pumpWidgetBuilder(MyApp(), surfaceSize: size);
    
    //マスターのスクリーンショットと同じかテストする
    await screenMatchesGolden(tester, 'myApp');
  });
}