[Flutter] 테스트 코드에서 부모 위젯이나 자식 위젯 찾기

[Flutter] 테스트 코드에서 부모 위젯이나 자식 위젯 찾기

2023-03-18 hit count image

Flutter에서 테스트 코드를 작성할 때, 부모 위젯을 찾거나 자식 위젯을 찾아 값을 확인하는 테스트 코드를 작성하는 방법에 대해서 알아보겠습니다.

개요

Flutter에서 테스트 코드를 작성하다보면 부모 위젯을 찾거나 자식 위젯을 찾아 위젯의 값을 확인해야할 때가 있습니다.

이번 블로그 포스트에서는 테스트 코드에서 부모 위젯 또는 자식 위젯을 찾아 값을 확인하는 방법에 대해서 알아보도록 하겠습니다.

여기서 소개하는 소스코드는 GitHub에서 확인하실 수 있습니다.

프로젝트 준비하기

테스트 코드에서 부모 위젯이나 자식 위젯을 찾는 방법을 알아보기 위해, 다음 명령어를 실행하여 새로운 프로젝트를 생성합니다.

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

Scaffold 위젯을 기준으로 Icon 타입의 자식 위젯을 찾고, 해당 위젯의 아이콘이 add인지 확인하는 테스트 코드를 작성하였습니다. 이렇게 테스트 코드를 작성하였다면 다음 명령어를 실행하여 테스트 코드를 실행해 봅니다.

flutter test test/widget_test.dart

그럼, 다음과 같이 문제없이 테스트 코드가 실행되는 것을 확인할 수 있습니다.

00:03 +2: All tests passed!

완료

이번 블로그 포스트에서는 Flutter에서 테스트 코드를 작성할 때, 부모 위젯이나 자식 위젯을 찾는 방법에 대해서 알아보았습니다. 종종 부모 위젯이나 자식 위젯을 찾아 테스트를 해야할 경우가 발생하므로, 이 부분을 잘 기억해 두면 도움이 될거 같습니다.

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

앱 홍보

책 홍보

스무디 한 잔 마시며 끝내는 React Native 책을 출판한지 벌써 2년이 다되었네요.
이번에도 좋은 기회가 있어서 스무디 한 잔 마시며 끝내는 리액트 + TDD 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.

스무디 한 잔 마시며 끝내는 React Native, 비제이퍼블릭
스무디 한 잔 마시며 끝내는 리액트 + TDD, 비제이퍼블릭
[심통]현장에서 바로 써먹는 리액트 with 타입스크립트 : 리액트와 스토리북으로 배우는 컴포넌트 주도 개발, 심통
Posts