[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);
  });