FlutterでIntegrationTestしてみた

導入

過去に私はモバイルアプリエンジニアとしてFlutterでアプリを作っていました。
当時は、「実装する」ことがメインになっていたので、テストコードを書いていませんでした。
(バックエンド側はユニットテストコードを書いていましたが、モバイル側は意識していませんでした。)

今になって色々調べてみると、Flutterには、

• Unit Test
• Widget Test
• Integration Test
  の3種類があるということを知りましたので、
  試しにこれらを実装してみることにしました。

まず今回はWidget Testを実装してみたので、その解説をしていきます。

今回実装したアプリ

起動時

画面右下にFloatingActionButtonがあるだけです。

ボタン押下

FloatingActionButtonを押すと、そのタイムスタンプのContainerが画面に表示されます。

今回は初期表示から、このボタン押下後の動きのIntegration Testを実装しました。

テストコード

※今回、他の詳細な実装は省きます。
UTとWidgetTestは以下の記事を参照してください。

main_test.dart

void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  testWidgets('show views', (tester) async {
    app.main();
    await tester.pumpAndSettle();
    final fixedTime = DateTime(2024, 6, 30);
    final expected = fixedTime.toString();

    // 初期表示時には表示されないことを確認
    expect(find.text(expected), findsNothing);

    await withClock(Clock.fixed(fixedTime), () async {
      await tester.tap(
        find.byKey(const Key('add_date_button')),
      );
      await tester.pumpAndSettle();

      // add_date_buttonのボタンを押した後に表示されることを確認
      expect(find.text(expected), findsOneWidget);
    });
  });
}

簡単に重要な部分の解説です。

描画が完了するまで待機する処理

タイトルの通りですが、Buildが走って再描画された時に、その完了を待つための処理です。
初期描画にも記述するものになります。

await tester.pumpAndSettle();

特定のボタンをタップする処理

この場合、[add_date_button]というKey名のボタンをタップするという動作を行うための処理です。

await tester.tap(
    find.byKey(const Key('add_date_button')),
);

このほかにも文字入力であったり、スワイプであったり、一般的な動作に関するメソッドがあるため、テストに合わせて、必要なメソッドを実装していくことになります。

終わりに

これで、Unit Test・Widget Test・Integration Testの全てについて実装することができました。
今回のIntegration Testは実行時間が他の2つに比べて長くなるため、自動化する際の実行タイミングを適切に判断する必要があると思われますが、いずれのテストにおいても重要であるのは確かです。
これからFlutterのテストコードを書こうと思っている人の役に立てば嬉しいです。