[Flutter] テストコードの中で親ウィジェットやチャイルドウィジェットを探す

概要

Flutterでテストコードを作成する際に親ウィジェットを探したりチャイルドウィジェットを探してウィジェットの値を確認する場合があります。

今回のブログポストではテストコードで親ウィジェットまたはチャイルドウィジェットを探して値を確認する方法について説明します。

ここで紹介するソースコードはGitHubで確認できます。

GitHub: https://github.com/dev-yakuza/study-flutter/tree/main/test/find_child_and_parent_widget

プロジェクトの準備

テストコードで親ウィジェットやチャイルドウィジェットを探す方法を調べるため、次のコマンドを実行して新しいプロジェクトを生成します。

flutter create find_child_and_parent_widget

今回のブログポストではflutter createコマンドで生成された基本アプリのテストコードを修正して親やチャイルドウィジェットにアクセスする方法についてみてみます。

Flutter find child and parent widget - basic_app

親ウィジェットを探す

テストコードで親ウィジェットを探すためにはfindAncestorWidgetOfExactTypeを使います。親ウィジェットを探す方法について調べるためtest/widget_test.dartファイルを開いて下記のように修正します。

testWidgets('Find parent widget', (WidgetTester tester) async {
  await tester.pumpWidget(const MyApp());

  final column = tester
      .element(find.text('You have pushed the button this many times:'))
      .findAncestorWidgetOfExactType<Column>();
  expect((column?.children[1] as Text).data, '0');
});

You have pushed the button this many times:文字列を持ってる要素(Element)を探してfindAncestorWidgetOfExactType関数を使って、一番近い親Columnウィジェットを探します。

その後、チャイルドウィジェットのTextウィジェットに表示された文字列を確認するテストコードを作成します。このようにテストコードを作成したら、次のコマンドを実行してテストコードを実行してみます。

flutter test test/widget_test.dart

そしたら、次のように問題なくテストコードが実行されることが確認できます。

00:04 +1: All tests passed!

チャイルドウィジェットを探す

テストコードでチャイルドウィジェットを探すためにはdescendantを使います。チャイルドウィジェットを探す方法を調べるためtest/widget_test.dartファイルを開いて下記のように修正します。

testWidgets('Find child widget', (WidgetTester tester) async {
    await tester.pumpWidget(const MyApp());

    final icon = find.descendant(
      of: find.byType(Scaffold),
      matching: find.byType(Icon),
    );
    expect(tester.widget<Icon>(icon).icon, Icons.add);
  });