<div id="readability-page-1" class="page"><div><div><nav aria-label="breadcrumb"><ol itemscope="" itemtype="http://schema.org/BreadcrumbList"><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/">Home</a><meta itemprop="position" content="1"></li><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/flutter">flutter</a><meta itemprop="position" content="2"></li><li aria-current="page" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/flutter/test/find_child_and_parent_widget/">[Flutter] 테스트 코드에서 부모 위젯이나 자식 위젯 찾기</a><meta itemprop="position" content="3"></li></ol></nav></div><div><article><div id="contents_list"><h2 id="section">목차</h2><ul><li><a href="#개요">개요</a></li><li><a href="#프로젝트-준비하기">프로젝트 준비하기</a></li><li><a href="#부모-위젯-찾기">부모 위젯 찾기</a></li><li><a href="#자식-위젯-찾기">자식 위젯 찾기</a></li><li><a href="#완료">완료</a></li></ul></div><h2 id="개요">개요</h2>Flutter에서 테스트 코드를 작성하다보면 부모 위젯을 찾거나 자식 위젯을 찾아 위젯의 값을 확인해야할 때가 있습니다.이번 블로그 포스트에서는 테스트 코드에서 부모 위젯 또는 자식 위젯을 찾아 값을 확인하는 방법에 대해서 알아보도록 하겠습니다.여기서 소개하는 소스코드는 <code>GitHub</code>에서 확인하실 수 있습니다.<ul><li>GitHub: <a href="https://github.com/dev-yakuza/study-flutter/tree/main/test/find_child_and_parent_widget" rel="nofollow noreferrer" target="_blank">https://github.com/dev-yakuza/study-flutter/tree/main/test/find_child_and_parent_widget</a></li></ul><h2 id="프로젝트-준비하기">프로젝트 준비하기</h2>테스트 코드에서 부모 위젯이나 자식 위젯을 찾는 방법을 알아보기 위해, 다음 명령어를 실행하여 새로운 프로젝트를 생성합니다.<div><pre><code>flutter create find_child_and_parent_widget
</code></pre></div>이번 블로그 포스트에서는 <code>flutter create</code> 명령어로 생성된 기본 앱의 테스트 코드를 수정하여 부모나 자식 위젯에 접근하는 방법에 대해서 알아보도록 하겠습니다.<picture><source srcset="/assets/images/category/flutter/2023/find_child_and_parent_widget/basic_app.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2023/find_child_and_parent_widget/basic_app.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2023/find_child_and_parent_widget/basic_app.png" alt="Flutter find child and parent widget - basic_app"></picture><h2 id="부모-위젯-찾기">부모 위젯 찾기</h2>테스트 코드에서 부모 위젯을 찾기 위해서는 <code>findAncestorWidgetOfExactType</code>을 사용해야 합니다. 부모 위젯을 찾는 방법에 대해 알아보기 위해 <code>test/widget_test.dart</code> 파일을 열고 다음과 같이 수정합니다.<div><pre><code>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&lt;Column&gt;();
 expect((column?.children[1] as Text).data, '0');
});
</code></pre></div><code>You have pushed the button this many times:</code> 문자열을 가지는 요소(Element)를 찾고 <code>findAncestorWidgetOfExactType</code> 함수를 통해, 가장 가까운 부모 <code>Column</code> 위젯을 찾습니다.그런 다음 자식 위젯의 <code>Text</code> 위젯에 표시되는 문자열을 확인하는 테스트 코드를 작성하였습니다. 이렇게 테스트 코드를 작성하였다면 다음 명령어를 실행하여 테스트 코드를 실행해 봅니다.<div><pre><code>flutter test test/widget_test.dart
</code></pre></div>그럼, 다음과 같이 문제없이 테스트 코드가 실행되는 것을 확인할 수 있습니다.<div><pre><code>00:04 +1: All tests passed!
</code></pre></div><h2 id="자식-위젯-찾기">자식 위젯 찾기</h2>테스트 코드에서 자식 위젯을 찾기 위해서는 <code>descendant</code>을 사용해야 합니다. 자식 위젯을 찾는 방법을 알아보기 위해 <code>test/widget_test.dart</code> 파일을 열고 다음과 같이 수정합니다.<div><pre><code>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&lt;Icon&gt;(icon).icon, Icons.add);
 });
</code></pre></div><code>Scaffold</code> 위젯을 기준으로 <code>Icon</code> 타입의 자식 위젯을 찾고, 해당 위젯의 아이콘이 <code>add</code>인지 확인하는 테스트 코드를 작성하였습니다. 이렇게 테스트 코드를 작성하였다면 다음 명령어를 실행하여 테스트 코드를 실행해 봅니다.<div><pre><code>flutter test test/widget_test.dart
</code></pre></div>그럼, 다음과 같이 문제없이 테스트 코드가 실행되는 것을 확인할 수 있습니다.<div><pre><code>00:03 +2: All tests passed!
</code></pre></div><h2 id="완료">완료</h2>이번 블로그 포스트에서는 Flutter에서 테스트 코드를 작성할 때, 부모 위젯이나 자식 위젯을 찾는 방법에 대해서 알아보았습니다. 종종 부모 위젯이나 자식 위젯을 찾아 테스트를 해야할 경우가 발생하므로, 이 부분을 잘 기억해 두면 도움이 될거 같습니다.<code> 제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다! </code><h2>앱 홍보</h2><div> 지금 보고 계신 블로그를 작성하는 <code>Deku</code>가 개발한 앱을 한번 사용해보세요. <code>Deku</code>가 개발한 앱은 Flutter로 개발되었습니다. 관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.</div><h2>책 홍보</h2></article></div></div></div>

dev-yakuza

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