Flutter의 위젯 테스트(Widget Testing) 방법과 활용

Flutter의 위젯 테스트(Widget Testing) 방법과 활용

Flutter 앱을 개발할 때, 위젯 테스트(Widget Testing)는 개별 UI 요소가 올바르게 동작하는지 검증하는 중요한 과정입니다. 위젯 테스트를 활용하면 버그를 조기에 발견하고, UI 변경이 기존 기능에 영향을 미치는지 확인할 수 있습니다.

이 글에서는 Flutter에서 위젯 테스트를 설정하고 실행하는 방법을 설명하고, 효과적인 테스트 전략을 소개하겠습니다.

---

1. 위젯 테스트(Widget Testing)란?

위젯 테스트(Widget Testing, Component Testing)는 Flutter에서 특정 위젯이 예상대로 동작하는지 검증하는 테스트 방식입니다. 이는 유닛 테스트보다 더 높은 수준의 테스트이며, UI가 사용자의 입력을 올바르게 처리하는지 확인하는 데 초점을 맞춥니다.

위젯 테스트를 수행하면 다음과 같은 장점이 있습니다.

• UI의 정상 동작 여부 검증: 버튼 클릭, 텍스트 입력, UI 업데이트 확인
• 자동화 테스트 가능: CI/CD 환경에서 테스트 실행 가능
• 디버깅 시간 단축: 코드 변경 시 UI 버그 조기 발견

이제 Flutter에서 위젯 테스트를 설정하는 방법을 살펴보겠습니다.

---

2. 위젯 테스트 환경 설정

(1) Flutter 위젯 테스트 패키지 설치

Flutter 프로젝트에서 위젯 테스트를 실행하려면 flutter_test 패키지가 필요합니다. 이 패키지는 Flutter 프로젝트에 기본 포함되어 있습니다.

(2) 테스트 폴더 구조

위젯 테스트 파일은 test/ 디렉토리에 위치해야 합니다.

lib/
 ├── main.dart
 ├── widgets/
 │   ├── counter_widget.dart
test/
 ├── counter_widget_test.dart

이제 실제로 위젯 테스트를 작성해 보겠습니다.

---

3. 위젯 테스트 작성 방법

(1) 테스트할 위젯 코드

먼저, 간단한 카운터 UI 위젯을 작성합니다.

// lib/widgets/counter_widget.dart
import 'package:flutter/material.dart';

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('카운터 값:', key: Key("counter_text")),
        Text('$_counter', key: Key("counter_value"), style: TextStyle(fontSize: 24)),
        ElevatedButton(
          key: Key("increment_button"),
          onPressed: _incrementCounter,
          child: Text("증가"),
        ),
      ],
    );
  }
}

(2) 위젯 테스트 파일 작성

이제 CounterWidget이 올바르게 동작하는지 테스트하는 코드를 작성합니다.

// test/counter_widget_test.dart
import 'package:flutter_test/flutter_test.dart';
import 'package:flutter/material.dart';
import 'package:my_app/widgets/counter_widget.dart';

void main() {
  testWidgets('카운터 증가 테스트', (WidgetTester tester) async {
    // 위젯을 테스트 환경에 추가
    await tester.pumpWidget(MaterialApp(home: Scaffold(body: CounterWidget())));

    // 초기 카운터 값 확인
    expect(find.text('0'), findsOneWidget);

    // 버튼 클릭
    await tester.tap(find.byKey(Key("increment_button")));
    await tester.pump();

    // 카운터 값 증가 확인
    expect(find.text('1'), findsOneWidget);
  });
}

이제 이 테스트를 실행해 보겠습니다.

---

4. 위젯 테스트 실행

Flutter에서 위젯 테스트를 실행하는 방법은 다음과 같습니다.

(1) 모든 테스트 실행

flutter test

(2) 특정 테스트 파일 실행

flutter test test/counter_widget_test.dart

테스트가 성공하면 다음과 같은 메시지가 출력됩니다.

00:01 +1: All tests passed!

---

5. UI 상호작용 테스트

Flutter에서는 위젯이 사용자 입력을 올바르게 처리하는지 테스트할 수 있습니다.

(1) 텍스트 입력 테스트

사용자가 입력한 텍스트가 올바르게 표시되는지 확인하는 테스트입니다.

// test/textfield_test.dart
import 'package:flutter_test/flutter_test.dart';
import 'package:flutter/material.dart';

void main() {
  testWidgets('텍스트 필드 입력 테스트', (WidgetTester tester) async {
    await tester.pumpWidget(MaterialApp(
      home: Scaffold(body: TextField(key: Key("text_field"))),
    ));

    await tester.enterText(find.byKey(Key("text_field")), "Hello, Flutter!");
    expect(find.text("Hello, Flutter!"), findsOneWidget);
  });
}

(2) 체크박스 테스트

// test/checkbox_test.dart
import 'package:flutter_test/flutter_test.dart';
import 'package:flutter/material.dart';

void main() {
  testWidgets('체크박스 선택 테스트', (WidgetTester tester) async {
    bool isChecked = false;

    await tester.pumpWidget(MaterialApp(
      home: StatefulBuilder(
        builder: (context, setState) {
          return Checkbox(
            key: Key("checkbox"),
            value: isChecked,
            onChanged: (bool? value) {
              setState(() {
                isChecked = value!;
              });
            },
          );
        },
      ),
    ));

    // 초기 상태 확인
    expect(find.byType(Checkbox), findsOneWidget);
    expect(isChecked, false);

    // 체크박스 클릭
    await tester.tap(find.byKey(Key("checkbox")));
    await tester.pump();

    // 체크박스가 선택되었는지 확인
    expect(isChecked, true);
  });
}

---

결론

Flutter에서 위젯 테스트를 활용하면 UI 요소가 정상적으로 동작하는지 자동으로 검증할 수 있습니다.

• 기본 테스트: testWidgets와 expect() 활용
• 버튼 클릭 테스트: tester.tap() 활용
• 텍스트 입력 테스트: tester.enterText() 활용
• 체크박스 및 라디오 버튼 테스트: tester.tap() 활용

이제 위젯 테스트를 활용하여 더욱 안정적인 Flutter 앱을 개발해 보세요!