[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

私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！