[Flutter] Image.network 테스트하기

개요

Flutter에서 외부 이미지를 불러오기 위해서는 Image.network를 사용합니다. 이번 블로그 포스트에서는 run_with_network_images 패키지를 사용하여 Image.network를 사용하여 이미지를 표시하는 위젯을 테스트하는 방법에 대해서 알아보도록 하겠습니다.

run_with_network_images 패키지

Image.network를 사용하는 위젯을 테스트하면, 400 에러가 발생하여 테스트를 제대로 수행할 수 없습니다. Image.network는 dart:io의 HttpClient를 사용하고 있는데, Flutter 위젯 테스트에서 dart:io는 항상 400 에러를 반환하기 때문에 이런 문제가 발생합니다.

Flutter의 테스트 코드에서 run_with_network_images 패키지를 사용하면 이런 문제를 해결할 수 있습니다.

https://pub.dev/packages/run_with_network_images

run_with_network_images 패키지 설치

run_with_network_images 패키지를 사용하기 위해 다음 명령어를 실행하여 run_with_network_images 패키지를 설치합니다.

flutter pub add --dev run_with_network_images

run_with_network_images 패키지 사용

Image.network를 사용하는 위젯을 테스트하기 위해서는, run_with_network_images의 runWithNetworkImages 함수를 사용하여 다음과 같이 테스트 코드를 수정할 필요가 있습니다.

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

void main() {
  testWidgets('Network image is rendered in widget test', (
    WidgetTester tester,
  ) async {
    await runWithNetworkImages(() async {
      await tester.pumpWidget(const MyApp());

      final image = tester.widget<Image>(find.byType(Image));
      expect(
        (image.image as NetworkImage).url,
        'https://dev-yakuza.posstree.com/assets/images/yakuza.jpg',
      );
    });
  });
}

Image.network를 사용하는 위젯의 테스트 코드를 await runWithNetworkImages(() async {});로 감싸면 400 에러가 발생하지 않고 테스트를 진행할 수 있습니다.

완료

이것으로 run_with_network_images 패키지를 사용하여 Flutter의 테스트 코드에서, Image.network를 사용하는 위젯을 테스트하는 방법에 대해서 알아보았습니다. Image.network를 사용한다면 반드시 발생하는 문제이므로, Image.network를 사용한다면 run_with_network_images 패키지 사용을 추천합니다.

run_with_network_images 패키지는 제가 만든 패키지 입니다. 만약, 피드백이나 개선할 점이 있다면, GitHub의 리포지토리에서 알려주세요.

Github Sponsor

Buy me a coffee

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

앱 홍보

지금 보고 계신 블로그를 작성하는 Deku가 개발한 앱을 한번 사용해보세요.
Deku가 개발한 앱은 Flutter로 개발되었습니다.

관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.

책 홍보

스무디 한 잔 마시며 끝내는 React Native 책을 출판한지 벌써 2년이 다되었네요.
이번에도 좋은 기회가 있어서 스무디 한 잔 마시며 끝내는 리액트 + TDD 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.