FlutterのGoldenTestで日本語を表示する

今回はgolden_toolkitを用いた際のGolden（マスターのスクリーンショット）に日本語を表示していく方法をまとめました。

Before	After

GoldenTestとは

GoldenTestなにそれ？って方や、とりえあず動かしてみたいという方は以前の記事を参考にしてください。
https://zenn.dev/matsumaru/articles/c2bf8ec468cff8
https://zenn.dev/matsumaru/articles/44b4dc9927bb41

前提条件

golden_toolkitを導入している

今回このライブラリを参考にしています。残念なことにNullSafetyではないので使えない・・・
https://pub.dev/packages/flutter_fonts_jp

手順

1. pubspec.ymalにassets追加
2. assetフォルダを作成してフォント（tff）を追加
3. フォントを読み込む関数作成
4. テストコード作成
5. テスト実行

assetフォルダを作成してフォント（tff）を追加

プロジェクトの直下にassetフォルダを作成して、表示したいフォントファイルを追加します。
今回はNotoSansCJKjp-Regular.ttfを使いました。フォントファイルをググれば色々でてきます。

pubspec.ymalにassets追加

あとでフォントを読み込めるように追記しておきます。

pubspec.yaml

flutter:
  assets:
    - asset/

フォントを読み込む関数作成

これでフォントを読み込みます。

Future<void> loadJapaneseFont() async {
  TestWidgetsFlutterBinding.ensureInitialized();
  final binary = rootBundle.load('asset/NotoSansCJKjp-Regular.ttf');
  final loader = FontLoader('Roboto')..addFont(binary);
  await loader.load();
}

テストコード作成

実際にテストが走る前にフォント読み込みを実行してやれば、ちゃんと日本語表示してくれるようになります。

Future<void> loadJapaneseFont() async {
  TestWidgetsFlutterBinding.ensureInitialized();
  final binary = rootBundle.load('asset/NotoSansCJKjp-Regular.ttf');
  final loader = FontLoader('Roboto')..addFont(binary);
  await loader.load();
}

void main() {
  testGoldens('firstPage', (WidgetTester tester) async {
    //ここでフォント読み込みを実行する
    await loadJapaneseFont();
    final builder = DeviceBuilder()
      ..overrideDevicesForAllScenarios(devices: [
        Device.iphone11,
      ])
      ..addScenario(
        widget: FirstPage(),
        name: 'default page',
      );
    await tester.pumpDeviceBuilder(builder);
    await screenMatchesGolden(tester, 'firstPage');
  });
}

テスト実行

あとはターミナルで以下コマンドを叩いたら日本語が表示されているはず！

flutter test --update-goldens

Before	After

終わりに

振り返ってみるとめっちゃ簡単だけど、すごい時間が掛かったので参考になれば幸いです。