[flutter] 플러터 훅 위젯을 활용한 UI 테스트 방법

21 Dec 2023

flutter

플러터(Flutter) 앱을 개발하다 보면 UI 테스트가 매우 중요합니다. UI 테스트를 수행하여 앱의 사용자 인터페이스가 예상대로 동작하는지 확인할 수 있습니다.

플러터는 WidgetTester 클래스를 사용하여 위젯을 테스트하는 것을 지원하며, 플러터 훅(Flutter Hook)을 활용하여 테스트 코드를 더욱 쉽게 작성할 수 있습니다.

플러터 훅 위젯

플러터 훅은 훅 스토어를 통해 다양한 상태와 위젯을 테스트하고 관리하는 것을 도와주는 도구입니다. 다양한 테스트 시나리오를 작성하고 테스트 속도를 높이는 데 도움이 됩니다.

UI 테스트 작성 방법

아래는 간단한 플러터 훅을 사용하여 UI 테스트를 작성하는 예제 코드입니다.

import 'package:flutter_test/flutter_test.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter/material.dart';

void main() {
  testWidgets('Counter increments smoke test', (WidgetTester tester) async {
    await tester.pumpWidget(HookBuilder(
      builder: (context) {
        final count = useState(0);
        return MaterialApp(
          home: Scaffold(
            body: Center(
              child: Text('Count: $count'),
            ),
            floatingActionButton: FloatingActionButton(
              onPressed: () {
                count.value++;
              },
              child: Icon(Icons.add),
            ),
          ),
        );
      },
    ));

    expect(find.text('Count: 0'), findsOneWidget);
    await tester.tap(find.byType(FloatingActionButton));
    await tester.pump();
    expect(find.text('Count: 1'), findsOneWidget);
  });
}

위의 예제 코드는 testWidgets 함수를 사용하여 “Counter increments smoke test” UI 테스트를 정의하고 있습니다. HookBuilder를 사용하여 플러터 훅을 테스트 환경에 적용하고, tester를 사용하여 위젯을 테스트하고 기대 결과를 확인하고 있습니다.

결론

플러터 훅을 활용하여 UI 테스트를 구성하고 관리하는 것은 매우 중요합니다. 간단한 예제로 시작하여 복잡한 앱의 UI까지 다양한 테스트 시나리오에 대비하도록 하겠습니다.

플러터 공식 문서에서 더 많은 자료를 찾아볼 수 있습니다.