플러터 위젯 테스트 가이드

위젯 테스트는 플러터 앱의 UI 요소들이 올바르게 동작하는지 확인하는 과정입니다.

유닛 테스트가 함수나 클래스의 개별 동작을 테스트하는 것이라면, 위젯 테스트는 UI 요소들이 기대한 대로 렌더링되고 상호작용하는지를 검증합니다.

이번 포스트에서는 플러터 위젯 테스트 작성 방법을 단계별로 설명하겠습니다.

준비물

1. 플러터 SDK
2. 테스트하고자 하는 플러터 앱
3. 플러터 테스트 패키지 (flutter_test)

1. 플러터 위젯 테스트 설정

먼저, pubspec.yaml 파일에 flutter_test 패키지를 추가합니다. 이 패키지는 플러터 SDK에 기본 포함되어 있으므로 별도로 설치할 필요는 없습니다.

dev_dependencies:
  flutter_test:
    sdk: flutter
  mockito: ^5.0.0

mockito는 모킹을 위해 사용할 수 있는 패키지입니다.

2. 기본 위젯 테스트 작성

테스트를 작성하기 전에 플러터 프로젝트의 test 폴더에 테스트 파일을 생성합니다. 예를 들어, test/widget_test.dart 파일을 만듭니다.

다음은 간단한 카운터 앱의 위젯 테스트 예제입니다

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:my_app/main.dart';

void main() {
  testWidgets('Counter increments smoke test', (WidgetTester tester) async {
    // 앱을 빌드하고 시작합니다.
    await tester.pumpWidget(MyApp());

    // 초기 카운터 값이 0인지 확인합니다.
    expect(find.text('0'), findsOneWidget);
    expect(find.text('1'), findsNothing);

    // '+' 버튼을 찾아 클릭합니다.
    await tester.tap(find.byIcon(Icons.add));
    await tester.pump();

    // 카운터 값이 1로 증가했는지 확인합니다.
    expect(find.text('0'), findsNothing);
    expect(find.text('1'), findsOneWidget);
  });
}

3. 위젯 테스트 세부 사항

위의 예제는 플러터 위젯 테스트의 기본적인 구조를 보여줍니다. 이제 각 단계의 의미를 더 자세히 살펴보겠습니다.

1. 앱 빌드 및 시작

await tester.pumpWidget(MyApp());

 

• pumpWidget 메서드는 주어진 위젯을 트리의 루트로 빌드하고, 렌더링합니다.

2. 초기 상태 확인

expect(find.text('0'), findsOneWidget);
expect(find.text('1'), findsNothing);

 

 

• find.text 메서드를 사용해 특정 텍스트를 가진 위젯을 찾습니다. findsOneWidget과 findsNothing은 기대되는 위젯의 개수를 나타냅니다.

3. 상호작용 테스트

await tester.tap(find.byIcon(Icons.add));
await tester.pump();

 

 

• tap 메서드는 지정된 위젯을 터치하는 동작을 시뮬레이션합니다. pump 메서드는 위젯 트리를 다시 빌드하고, 상태 변화를 반영합니다.

4. 상태 변화 확인

expect(find.text('0'), findsNothing);
expect(find.text('1'), findsOneWidget);

 

상호작용 후의 상태를 확인하여 UI가 올바르게 업데이트되었는지 검증합니다.

 

4. 추가 위젯 테스트 사례

 

더 복잡한 위젯 테스트 사례를 살펴보겠습니다. 예를 들어, 리스트 뷰를 테스트하는 경우입니다

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:my_app/list_view_page.dart';

void main() {
  testWidgets('ListView displays items', (WidgetTester tester) async {
    // ListView 페이지를 빌드합니다.
    await tester.pumpWidget(MaterialApp(home: ListViewPage()));

    // 스크롤 전 첫 번째 아이템이 화면에 있는지 확인합니다.
    expect(find.text('Item 0'), findsOneWidget);
    expect(find.text('Item 50'), findsNothing);

    // ListView를 스크롤합니다.
    await tester.drag(find.byType(ListView), const Offset(0, -500));
    await tester.pump();

    // 스크롤 후 첫 번째 아이템이 보이지 않고, 새로운 아이템이 화면에 있는지 확인합니다.
    expect(find.text('Item 0'), findsNothing);
    expect(find.text('Item 50'), findsOneWidget);
  });
}

이 테스트는 ListView 위젯을 스크롤하여 화면에 표시되는 아이템들이 올바르게 업데이트되는지를 확인합니다.

 

5. 결론

 

위젯 테스트는 플러터 앱의 UI 요소들이 기대한 대로 동작하는지를 검증하는 중요한 과정입니다.

이번 포스트에서는 기본적인 위젯 테스트 작성법과 더 복잡한 사례를 다루었습니다.

테스트를 통해 앱의 안정성을 높이고, 버그를 사전에 방지할 수 있습니다.

위젯 테스트를 작성하는 습관을 들여 보다 견고한 앱을 개발하시길 바랍니다.

추가적인 정보와 구현 예제는 공식 문서나 커뮤니티 리소스를 참고하세요.

 

수발가족을 위한 일기장 “나비일기장”

 

https://play.google.com/store/apps/details?id=com.maccrey.navi_diary_release

 

비공개테스트를 위한 20명의 테스터모집 앱 "테스터 쉐어"

 

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release