[flutter] 플러터에서의 http_mock_adapter를 활용한 화면 전환 테스트

05 Dec 2023

flutter

이번 글에서는 플러터(Flutter)에서 http_mock_adapter를 활용하여 화면 전환 테스트를 수행하는 방법에 대해 알아보겠습니다.

1. http_mock_adapter란?

http_mock_adapter는 HTTP 클라이언트 요청을 가로채어 가짜 응답을 반환하는 Flutter 패키지입니다. 테스트 중에 외부 API 호출을 시뮬레이션하거나 모의 응답을 만들어서 앱의 동작을 테스트할 때 유용하게 사용할 수 있습니다.

2. http_mock_adapter를 이용한 화면 전환 테스트 예시

우선 http_mock_adapter 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.4
  http_mock_adapter: ^1.0.2

이제 테스트할 화면 전환 기능을 포함하는 클래스를 생성합니다. 아래는 예시 코드입니다:

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:http_mock_adapter/http_mock_adapter.dart';

class MyApi {
  final http.Client httpClient = http.Client();

  Future<String> fetchData() async {
    final response = await httpClient.get(Uri.parse('https://api.example.com/data'));
    if (response.statusCode == 200) {
      return response.body;
    } else {
      throw Exception('Failed to load data');
    }
  }
}

class ScreenWithApiData extends StatefulWidget {
  @override
  _ScreenWithApiDataState createState() => _ScreenWithApiDataState();
}

class _ScreenWithApiDataState extends State<ScreenWithApiData> {
  final MyApi myApi = MyApi();

  String data = '';

  @override
  void initState() {
    super.initState();
    fetchData();
  }

  Future<void> fetchData() async {
    final response = await myApi.fetchData();
    setState(() {
      data = response;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Screen with API Data'),
      ),
      body: Center(
        child: Text(data),
      ),
    );
  }
}

이제 실제 테스트를 수행하는 코드를 작성해보겠습니다. 아래는 예시 코드입니다:

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

import 'package:your_app_name/main.dart';
import 'package:your_app_name/my_api.dart';

void main() {
  HttpMockAdapter httpMockAdapter;
  final myApi = MyApi();

  setUp(() {
    httpMockAdapter = HttpMockAdapter();
    myApi.httpClient = httpMockAdapter;
  });

  tearDown(() {
    httpMockAdapter.reset();
  });

  testWidgets('Screen with API Data Test', (WidgetTester tester) async {
    // 모의 응답 생성
    final responseData = 'Mocked Data';
    httpMockAdapter.onGet('https://api.example.com/data').reply(200, responseData);

    // 화면 전환 테스트
    await tester.pumpWidget(const MyApp());
    await tester.pumpAndSettle(); // 앱이 초기화되고 애니메이션을 마칠 때까지 대기

    // 모의 응답이 정상적으로 표시되는지 확인
    expect(find.text(responseData), findsOneWidget);
  });
}

위의 테스트 코드에서 httpMockAdapter.onGet('https://api.example.com/data').reply(200, responseData) 부분에서 외부 API 호출을 시뮬레이션하고 모의 응답을 생성할 수 있습니다.

테스트 코드를 실행하면 화면 전환 테스트가 수행되고 모의 응답이 정상적으로 표시되는지 확인할 수 있습니다.

3. 결론

플러터에서 http_mock_adapter를 사용하여 화면 전환 테스트를 수행하는 방법에 대해 알아보았습니다. http_mock_adapter를 활용하면 외부 API 호출을 시뮬레이션하고 모의 응답을 생성할 수 있어 앱의 동작을 테스트하는 데 유용합니다. 이를 통해 개발자는 개발 중인 앱의 기능을 안정적으로 테스트할 수 있습니다.