🧪 앱 테스트 유형 및 방법 살펴보기 (Unit, Widget, Intergration)

Testing Flutter Apps | Flutter

이번 글에서는 Flutter에서 어플리케이션을 테스팅하는 방법 및 유형에 대해서 살펴보도록 하겠다.

Flutter도 다른 프레임워크나 언어처럼 개발한 기능을 테스트하거나, 만들고자 하는 알고리즘을 사전에 테스트를 할 수 있도록 지원해주고 있다.

테스트는 필수가 아닌 선택의 영역이다 보니, 모든 기능에 대해 테스트를 하는 경우도 있고 일부 기능만 하는 경우도 있고 심지어는 아예 코드 테스트를 진행하지 않는 서비스도 있다.

이처럼 선택의 영역이다 보니 시간을 투자하면서 까지 테스트 케이스를 생각하고 작성하는 것이 불필요하다고 느끼는 개발자도 있고, 추후에 서비스가 확대됨에 따라 수정된 영역의 코드가 정상적으로 작동하는 지를 미리 테스트 코드로 작성하여 나중에 발생할 수도 있는 시간을 단축하는 것이 필요하다고 생각하는 개발자도 있다.

경험하거나 당장에 사용하지 않더라도 Flutter에서는 어떻게 코드를 테스트하고 UI를 테스트하는지 알아둬서 나쁠 것은 없기 때문에 가볍게 읽어보시면 좋을 것 같다.

App Testing ?

애플리케이션 테스팅을 왜 해야하는 걸까 ?

자체적으로 QA를 진행하는데, 왜 별도로 애플리케이션 테스팅도 진행 해야만 하는 건지는 당연한 이유이겠지만 앱의 기능이 추가될 때마다 전체 영역의 코어한 기능들에 대해서까지 QA를 진행하는 것은 많은 시간이 소요되기 때문에, 개발단에서 사전에 코드에 문제가 없는지, 추가된 코드로 인하여 기존의 기능에도 문제가 없는지를 자동으로 테스팅을 하는 것이다.

일반적으로 코드 테스팅을 진행하는 목적은 여러가지가 있겠지만, 버그 및 코드의 결함을 없애고 개발자가 의도한 대로 기능이 수행을 시키며 다양한 시나리오에서 서비스가 안정적으로 구동이 되는지를 확인하게 된다. 또한 초기에는 테스트 코드를 추가하면서 개발 속도가 늦어질 수 있지만 추후에 자동화된 테스트를 통해 반복적인 수작업 테스트를 줄일 수 있어 속도를 높힐 수 있으며, 작성된 테스트 코드가 기능을 문서화하는데 도움이 되기 때문이라고 생각한다.

즉, 단순한 이슈를 찾아내는 것이 아닌 애플리케이션의 전반적인 품질 및 검증을 하는 절차라고 볼 수 있다.

테스트를 위해서는 패키지 추가가 필요한데, 해당 패키지는 프로젝트 생성시 자동 추가된 패키지라 없다면 추가하면 된다.

dependencies

flutter_test 패키지는 개발시에만 사용하면 되기에 dev_dependencies에 추가해주면 된다.

dev_dependencies:
  flutter_test:
    sdk: flutter

Test File

테스트를 위해서 사용하는 테스트 관련 파일들은 반드시 test 폴더안에 넣어야만 정상적으로 동작하니 없다면 test 폴더를 생성해 주어야 한다.

---

Flutter에서는 Unit, Widet(UI), Intergration 이렇게 3가지 유형의 테스팅을 진행할 수 있도록 지원하고 있다.

이제 각각의 테스팅 방법에 대해서 다뤄보도록 하자.

Unit Test

첫 번째로 살펴볼 테스팅 방법은 Unit Test이다.

Unit Test는 단위 테스트라고 하며 개별 함수, 메서드, 클래스 등의 작은 코드 단위를 독립적으로 테스트하여 버그를 사전에 개선해 코드의 품질과 안정성을 높이는 테스트 방법이다.

먼저 간단한 유닛 테스트를 진행해보자.

test 파일에서 아래 코드를 실행해보자.

void main() {
  test("Unit Testing", () => expect(1 + 1, 2));
}

코드를 실행할 때에는 "Run"을 사용하면 된다. 테스팅 결과가 정상적으로 성공하면 아래와 같이 체크 표시가 표기 된다.

로그창에서도 테스트 실행에 대한 결과를 알 수 있다.

실패가 되면 어떻게 될까 ?

강제로 테스트 결과가 실패가 될 수 있도록 결과 값을 수정하여 진행해보자.

실패가 되면 아래와 같이 실패가 된 부분이 어떤 테스트 케이스인지를 포인트로 보여주면서, X 아이콘이 표기 된다.

이제 테스트를 어떻게 하는지 간단하게 살펴봤으니, 기능에 대해서 알아보도록 하자.

test

먼저 test 함수이다.

test 함수의 파라미터를 보면, 필수 값으로 description, body 값을 사용해야 한다.

void test(
  Object description,
  dynamic Function() body, {
  String? testOn,
  Timeout? timeout,
  dynamic skip,
  dynamic tags,
  Map<String, dynamic>? onPlatform,
  int? retry,
})

각 파라미터에 대해 간단하게 알아보자.

description

• 테스트의 설명이나 이름을 지정할 수 있고, 테스트 결과로 출력될 때에 사용

body

• 테스트할 코드를 추가하여 사용

testOn

• 테스트가 실행될 환경을 설정하여, Dart VM, 브라우저 등의 특정 환경에서만 테스트를 실행하도록 할 수 있음

timeout

• 테스트 완료시 까지의 최대 시간을 지정하여, 시간 내에 테스트가 완료되지 못하면 강제로 실패로 간주하도록 처리

skip

• 테스트를 건너뛸지에 대한 값을 지정

tags

• 태그를 배열 또는 문자열로 지정하여 특정 태그에 대한 테스트만을 실행하거나 건너뛸 수 있도록 함

onPlatform

• 플랫폼별로 테스트 파라미터를 개별적으로 지정

retry

• 테스트 실패시에 대한 반복 테스트 횟수를 지정

test("어떤 테스트 ?", () {
	// test code
});

expect

이어서 test 함수의 body에 실제로 실행할 테스트 코드를 넣을 때에 사용하는 expect에 대해서 살펴보도록 하자.

void expect(
  dynamic actual,
  dynamic matcher, {
  String? reason,
  dynamic skip,
})

expect 함수는 Flutter에서 테스팅을 하는데 있어 가장 핵심이 되는 기능이며, 실제 값(actual)과 예상 값(matcher)을 비교하여 테스트의 실패 및 성공을 결정하는 함수이다.

실제 값을 1로 넣고, 예상 값을 1로 넣어주면 당연히 성공을 할 것이다.

expect(1, 1);

이번에는 3+4를 실제 값에 넣어주고, 예상 값으로 7을 넣어주자.

expect(3 + 4, 7);

단순 계산 외에도 여러가지 값을 사용할 수 있다.

expect([1, 2, 3], contains(4));

group

여러 기능에 대한 테스트 케이스들을 그룹으로 관리하여 사용할 수 있다.

group 기능을 사용해 여러 테스트들을 묶어서 관련 높은 테스트만 진행하거나 관리할 수 있다.

void main() {
  group("테스트 그룹 1", () {
    test("첫 번째 테스트", () => null);
    test("두 번째 테스트", () => null);
    test("세 번째 테스트", () => null);
  });

  group("테스트 그룹 2", () {
    test("첫 번째 테스트", () => null);
    test("두 번째 테스트", () => null);
    test("세 번째 테스트", () => null);
  });
}

이제 테스트를 위한 방법에 대해서 알아봤으니, 본격적으로 Unit Test를 해보도록 하자.

먼저, Counter 객체를 lib 안에서 생성해주도록 하자.

class Counter {
  int value = 0;

  void increment() => value++;
  void decrement() => value--;
}

Counter 기능에 대한 단위 테스트를 만들어 보도록 하자.

void main() {
  test("초기 값이 0인가 ?", () {
    final Counter _counter = Counter();
    expect(_counter.value, 0);
  });

  test("증가 하는가 ?", () {
    final Counter _counter = Counter();
    _counter.increment();
    expect(_counter.value, 1);
  });

  test("감소 하는가 ?", () {
    final Counter _counter = Counter();
    _counter.decrement();
    expect(_counter.value, -1);
  });
}

코드를 실행 해보면, 정상적으로 Counter 기능에 대한 테스트 결과를 얻을 수 있다.

이번엔 Person 클래스를 생성해주고, 이름을 변경할 수 있는 기능을 추가하여 Person 클래스에 대한 단위 테스트를 진행해보자.

class Person {
  String? name;
  void changedName(String name) => this.name = name;
}

초기 값이 NULL인지와 changedName 기능을 사용해 name을 변경할 수 있는지 테스트 조건을 실행해 보자.

void main() {
  group("Person 기능 테스트", () {
    test("초기 값이 NULL 인가 ?", () {
      final Person _person = Person();
      expect(_person.name, null);
    });

    test("이름을 변경할 수 있는가 ?", () {
      final Person _person = Person();
      const String name = "TYGER";
      _person.changedName(name);
      expect(_person.name, name);
    });
  });
}

이처럼 유닛 테스트는 작은 단위의 클래스나 메서드, 개별 함수등의 테스트를 진행할 수 있도록 지원하고 있어 테스트 케이스를 추가해 기능을 점검할 수 있다.

Widget Test

이어서 Widget Test에 대해서 살펴보도록 하겠다.

Widget Test는 개별 위젯을 테스트할 수 있는 방법으로, Unit Test와 Intergration Test의 중간 정도의 위치에서 테스트를 진행하게 된다.

UI를 테스트할 수 있는 방법으로 개별 위젯이나 위젯 트리에 대한 테스트라고 보면 된다.

위젯 테스트를 위해서는 단위 테스트에서 사용하던 test 함수가 아닌 testWidgets함수를 사용해 테스트를 진행하게 된다.

testWidgets

testWidgets 함수의 기능이 test 함수와 거의 동일하지만, callback 부분에 대한 차이가 있다.

void testWidgets(
  String description,
  Future<void> Function(WidgetTester) callback, {
  bool? skip,
  Timeout? timeout,
  bool semanticsEnabled = true,
  TestVariant<Object?> variant = const DefaultTestVariant(),
  dynamic tags,
  int? retry,
})

callback을 보면 WidgetTester 객체를 사용해 위젯에 대한 빌드 및 상호작용을 통해 비동기적으로 테스트를 할 수 있도록 해준다.

간단한 UI를 구성해보도록 하겠다. count 변수를 사용해 값을 증가 또는 감소 시키고, 초기화할 수 있는 기능을 갖춘 구조이다.

이제 해당 위젯의 테스트를 진행해보자.

테스트를 진행할 위젯을 초기 빌드하기 위해 WidgetTester 객체의 기능인 pumpWidget 함수를 사용해주면 된다.

여기서 중요한 점은 pumpWidget에서 테스트 할 위젯을 실행할 때에 에러가 발생하는 경우라면 거의 대부분이 Directionality 위젯을 포함하지 못하여서 발생하는 오류기 때문에, Directionality 위젯을 자동으로 포함하는 MaterialApp 위젯을 최상위 위젯으로 감싸서 테스트를 하면 된다.

main() {
  testWidgets("CountWidget Test", (WidgetTester tester) async {
    await tester.pumpWidget(const MaterialApp(home: CountWidget()));
    expect(find.text("0"), findsOneWidget);
    expect(find.text("1"), findsNothing);
    expect(find.text("-1"), findsNothing);

    await tester.tap(find.byIcon(Icons.add));
    await tester.pump();
    expect(find.text("1"), findsOneWidget);
  });
}

pumpWidget으로 초기 빌드를 해주고 테스트 조건을 넣어주면 된다.

테스트는 단위 테스트와 동일하게 expect 함수를 사용하면 된다.

위젯이 초기 랜더링되고 나면, find를 사용해 랜더링된 텍스트를 찾을 수 있다.

count 변수는 0으로 초기화되서 실행되기 때문에, findsOneWidget의 값이 0인지를 확인하여 테스트를 할 수 있다.

findsNothing은 랜더링 된 텍스트의 값이 1이나 -1이 아닌 조건을 테스트하는 것이다.

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

이어서 WidgetTester 객체의 tap 기능을 사용해 특정 버튼을 탭할 수 있다.

find.byIcon을 사용해 증가 아이콘을 찾아서 탭을 해준다.

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

위젯 테스트시에는 위젯을 자동으로 다시 랜더링 할 수 없기 때문에 pump 함수로 변경된 위젯을 랜더링 할 수 있도록 해주어야 한다.

await tester.pump();

마지막으로 변경된 텍스트가 1인지를 테스트해보자.

expect(find.text("1"), findsOneWidget);

이번에는 조건을 더 추가해 보도록 하자.

main() {
  testWidgets("CountWidget Test", (WidgetTester tester) async {
    await tester.pumpWidget(const MaterialApp(home: CountWidget()));

    // count 값이 0인지
    expect(find.text("0"), findsOneWidget);
    // count 값이 1이 아닌지
    expect(find.text("1"), findsNothing);
    // count 값이 -1이 아닌지
    expect(find.text("-1"), findsNothing);

    // 증가 버튼 클릭
    await tester.tap(find.byIcon(Icons.add));
    // 위젯 업데이트
    await tester.pump();
    // count 값이 1인지
    expect(find.text("1"), findsOneWidget);

    // 감소 버튼 2번 클릭
    await tester.tap(find.byIcon(Icons.remove));
    await tester.tap(find.byIcon(Icons.remove));
    // 위젯 업데이트
    await tester.pump();
    // count 값이 -1인지
    expect(find.text("-1"), findsOneWidget);

    // 초기화 버튼 클릭
    await tester.tap(find.byIcon(Icons.refresh));
    await tester.pump();
    // count 값이 0인지
    expect(find.text("0"), findsOneWidget);
  });
}

이어서 스크롤 기능이 포함된 위젯 테스트를 진행해보자.

20개의 아이템을 리스트로 보여주고 각 아이템을 클릭하면 상단으로 아이템을 이동시켜 주는 구조이다.

테스트 코드를 보면 drag 기능을 사용해 특정 위치까지 스크롤을 이동할 수 있으며, 스크롤과 같은 애니메이션을 테스트 하는 경우에는 pumpAndSettle 기능을 사용해 애니메이션의 완료 시점까지 기다려야 다음 테스트가 문제 없이 진행할 수 있다.

void main() {
	testWidgets("ScrollWidget Test", (WidgetTester tester) async {
    	await tester.pumpWidget(const MaterialApp(home: ScrollWidget()));

    	// 초기 상단 아이템이 Item 1 인지 확인
    	expect(find.text("Item 1"), findsWidgets);

    	// Item 2 아이템 클릭
    	await tester.tap(find.text("Item 2"));
    	await tester.pump();

    	// 상단 아이템이 Item 2인지 확인
    	expect(find.text("Item 2"), findsWidgets);

    	// Item 2를 찾아 y축으로 -250 픽셀 스크롤
    	await tester.drag(find.text("Item 2"), const Offset(0, -250));
    	// 애니메이션 끝날 때까지 대기
	    await tester.pumpAndSettle();

    	// 상단 아이템이 Item 5인지 확인
	    expect(find.text("Item 5"), findsOneWidget);
  });
}

위젯 테스트는 다양한 UI 테스트를 WidgetTester 객체를 통해서 테스트를 진행할 수 있으니, Flutter 앱 테스트에 대한 도큐먼트 참고하시면 좋을 것 같다.

Intergration Test

마지막으로 Intergration Test에 대해서 알아보자.

통합 테스트는 애플리케이션 구성 요소들을 결합하여 전체 시스템이 예상대로 작동하는지 확인하는 방법으로, 실제 사용자 시나리오를 시뮬레이션하고 화면 간의 네비게이션 처리 및 데이터 흐름, 사용자 입력 처리 등을 포함한 전체 앱의 동작을 검증하게 된다.

위젯 테스트와 유닛 테스트 단계에서 테스트하지 못하는 플러그인, API 등의 외부 의존성을 포함하여 전체를 테스트할 수 있어 안정성을 보장하는 데 중요한 역할을 하지만, 테스트 구조의 복잡성이 커지고 이에 따른 시간 소요가 많아진다는 단점도 있다.

Dependencies

통합 테스트 진행을 위해 패키지를 추가해 주도록 하자.

dev_dependencies:
  integration_test:
    sdk: flutter

이번 통합 테스트에 사용할 UI는 Flutter 프로젝트 생성시 자동으로 만들어져 있는 CountApp을 사용하도록 하겠다.

프로젝트 폴더 아래에 intergration_test 폴더를 생성하고 app_test.dart 파일을 아래와 같이 생성해주자.

app_test.dart

테스트 코드를 추가해 주도록 하자.

통합 테스트를 위한 엔트리 포인트로 main 함수를 실행시켜야 하기 때문에 아래와 같이 main을 추가해 주도록 하자.

import 'package:flutter_test/flutter_test.dart';
import 'package:integration_test/integration_test.dart';

import 'package:test_code_sample/main.dart' as app;

void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  group("End to End Test", () {
    testWidgets("Count App", (tester) async {
      app.main();
      await tester.pumpAndSettle();

      expect(find.text("0"), findsOneWidget);

      final Finder fab = find.byTooltip("Increment");

      await tester.tap(fab);

      await tester.pumpAndSettle();

      expect(find.text("1"), findsOneWidget);
    });
  });
}

통합 테스트를 실행하기 위해서는 실제 디바이스나 시뮬레이터에서 실행해야 하기 때문에 연결 후 아래 터미널 명령어를 사용해서 실행하거나 IDE에서 실행을 해주면 된다.

flutter test integration_test/app_test.dart

모든 테스트가 완료되면 아래와 같이 테스트가 실행이 되고, 실제 빌드된 앱에서 카운트가 1이 증가된 상태로 테스트가 완료된 것을 확인할 수 있다.

지금은 단순한 앱의 통합 테스트만을 진행한 것이기 때문에 테스트 코드를 작성할 것이 많지 않았지만 실제 서비스를 개발하기 위해서 통합 테스트 환경을 만드는 것은 쉬운 작업은 아니다.

통합 테스트에 사용되어 지는 테스트 코드들은 위에서 살펴본 위젯 테스트와 유닛 테스트에서 사용한 방법을 결합해서 구성해주면 된다.

마무리

간단하게 Flutter에서 앱 테스팅을 위한 방법인 단위, 위젯, 통합 테스트에 대한 환경 구성 및 코드 작성 방법과 테스트에 대한 부분을 다뤄봤다.

아직은 앱 테스팅을 실제로 서비스에 어떻게 적용해야 하는지 감이 잘 오지 않을 수도 있을 것이다. 당연한 것이다.

서비스 개발에 있어 테스트 케이스를 구성하는 작업은 결코 쉬운일은 아니기에 천천히 단순한 기능부터 구조를 만들어가면서 연습하면 된다.

다음에는 서비스를 만들면서 테스트 코드를 구성하는 방법론에 대해서 다뤄보면서 실제 서비스에 적용해 볼 수 있도록 글을 작성할 예정이다.

감사합니다 !

[Github] Sample Code