[flutter] 플러터에서 http_mock_adapter를 활용한 UI 테스트 작성하기

05 Dec 2023

flutter

플러터는 크로스 플랫폼 앱 개발 프레임워크로, 네트워크 요청을 테스트하는 것은 매우 중요한 부분입니다. 이를 위해 http_mock_adapter 라이브러리를 사용하여 가짜 HTTP 응답을 모의(Mock)해서 UI 테스트를 작성할 수 있습니다.

`http_mock_adapter`란?

http_mock_adapter는 http 패키지와 함께 사용되는 Flutter 라이브러리입니다. 이 라이브러리를 사용하면 네트워크 요청에 가짜 응답을 주입하여 테스트 중에 실제 서버와의 통신 없이 응답을 모의할 수 있습니다.

`http_mock_adapter` 사용하기

1. 의존성 추가하기

프로젝트의 pubspec.yaml 파일에 아래의 의존성을 추가합니다:

dev_dependencies:
  http_mock_adapter: ^<version>

여기서 <version>은 원하는 라이브러리 버전입니다. 의존성 추가 후, 터미널에서 flutter pub get 명령을 실행하여 의존성을 설치합니다.

2. `http_mock_adapter` 설정하기

테스트 환경에서 http_mock_adapter를 사용하기 위해, setUp 메서드에서 HttpClientWithMockAdapter를 초기화해야 합니다. 아래의 예제 코드는 플러터 테스트 파일의 기본 구조입니다:

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

void main() {
  // HttpClientWithMockAdapter 초기화
  final mockAdapter = HttpClientWithMockAdapter();
  
  // 테스트 실행 전
  setUp(() {
    // mockAdapter를 HttpClient 기본값으로 설정
    TestWidgetsFlutterBinding.ensureInitialized();
    HttpOverrides.global = mockAdapter;
  });
  
  // 테스트 종료 후
  tearDown(() {
    // HttpClient 기본값으로 복원
    mockAdapter.reset();
  });
  
  // 테스트 케이스 작성
  test('테스트 케이스 제목', () async {
    // 가짜 응답 설정
    mockAdapter
      .onGet('/api/example')
      .reply(200, 'Mock Response');
    
    // 테스트 코드 작성
    // ...
  });
}

위 코드에서는 HttpClientWithMockAdapter를 초기화하고, 테스트 실행 전에 HttpOverrides.global에 mockAdapter를 할당합니다. 테스트 종료 후에는 mockAdapter를 reset하여 초기 상태로 되돌립니다.

3. 가짜 응답 설정하기

http_mock_adapter를 사용하여 가짜 응답을 설정하려면 onGet, onPost, onPut, onDelete 등의 메서드를 사용합니다.

mockAdapter
  .onGet('/api/example')
  .reply(200, 'Mock Response');

위의 예제는 /api/example 경로로 GET 요청이 오면 200 상태코드와 Mock Response라는 가짜 응답을 반환합니다.

4. 응답 검증하기

응답을 확인하고 검증하기 위해, http_mock_adapter는 onRequest를 사용합니다. onRequest 메서드를 사용하면 요청 매개 변수를 검사하거나 특정 경로에 대해 여러 응답을 설정할 수 있습니다.

mockAdapter
  .onRequest(
      path: '/api/{id}',
      method: 'GET',
      headers: {'Authorization': 'Bearer token'})
  .reply(200, 'Mock Response');

// 테스트 코드 작성 및 응답 검증
// ...

위의 예제는 경로(/api/{id}), 메서드(GET), 헤더(Authorization: Bearer token)에 해당하는 요청에 대한 가짜 응답을 설정합니다.

마무리

이제 플러터에서 http_mock_adapter를 사용하여 UI 테스트를 작성할 수 있게 되었습니다. 가짜 응답을 설정하고, 응답을 검증하여 원하는 테스트 시나리오를 완료할 수 있습니다. 자세한 사항은 공식 문서를 참조하시기 바랍니다.

http_mock_adapter란?

http_mock_adapter 사용하기