How to widget test Cached network manager

[flutteradv]

Is there any tests code sample on Cached network manager? how we should write widget tests for it

[aBuder]

I always have the same problem

[wheel1992]

Hi, does anyone successfully test integration test with CachedNetworkImage?

[jogboms]

@renefloor any pointers on this one? Or do we just mock the dependencies.

[renefloor]

That's indeed something that should be improved I think. With smaller unit tests you can mock the CacheManager in the image widget.

[DevNico]

Any updates on this? What's the way to go here?

[ncuillery]

This blog post might help: https://medium.com/flutter-community/golden-testing-using-cachednetworkimage-1b488c653af3

[woprandi]

I have a issue to test when I use CircularProgressIndicator as progress widget like this :

 CachedNetworkImage(
    imageUrl: '$baseUrl/pictures/${image}',
    cacheManager: context.watch<CacheManager>(),
    progressIndicatorBuilder: (context, url, downloadProgress)
      return Center(
        child: CircularProgressIndicator(
          value: downloadProgress.progress,
        ),
      );
    },
  ),

I didn't check code yet but the behavior looks like the animation never complete since WidgetTester.pumpAndSettle() will always timeout. Replacing with a SizedBox when downloadProgress.progress is null fixe the issue

[fzyzcjy]

I see the following error:

══╡ EXCEPTION CAUGHT BY FLUTTER TEST FRAMEWORK ╞════════════════════════════════════════════════════
The following MissingPluginException was thrown running a test:
MissingPluginException(No implementation found for method getDatabasesPath on channel
com.tekartik.sqflite)

When the exception was thrown, this was the stack:
#0      MethodChannel._invokeMethod (package:flutter/src/services/platform_channel.dart:165:7)
<asynchronous suspension>
<asynchronous suspension>
(elided one frame from package:stack_trace)

The test description was:
  simplest
════════════════════════════════════════════════════════════════════════════════════════════════════

anyone has the same problem?

[diegogarciar]

Just tried with updated code from bloc post

class MockBaseCacheManager extends Mock implements BaseCacheManager {
  static const fileSystem = LocalFileSystem();
  @override
  Stream<FileResponse> getFileStream(
    String url, {
    String? key,
    Map<String, String>? headers,
    bool? withProgress,
  }) async* {
    final fileName = './test/assets/${File(url).uri.pathSegments.last}';

    final file = fileSystem.file(fileName);

    yield FileInfo(
      file, // Path to the asset
      FileSource.Cache, // Simulate a cache hit
      DateTime(2050), // Very long validity
      url, // Source url
    );
  }
}

my issue is that on _image_loader.dart line 58, file.readAsBytes() never completes.
I did some research, it seems that widget tests run on some isolate and that's the reason why it fails. Any ideas?

[susatthi]

It worked at v3.2.1!

// ignore_for_file: depend_on_referenced_packages

import 'package:cached_network_image/cached_network_image.dart';
import 'package:file/local.dart';
import 'package:flutter/material.dart';
import 'package:flutter_cache_manager/flutter_cache_manager.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:mocktail/mocktail.dart';

void main() {
  testWidgets('The image should be displayed', (tester) async {
    await tester.runAsync(() async {
      ImageProvider? receiveImageProvider;

      await tester.pumpWidget(
        CachedNetworkImage(
          imageUrl: 'dummy url',
          cacheManager: MockCacheManager(),
          imageBuilder: (context, imageProvider) {
            receiveImageProvider = imageProvider;
            return Image(
              image: imageProvider,
            );
          },
        ),
      );

      expect(receiveImageProvider, isNull);

      // Wait for the image to be loaded.
      await Future<void>.delayed(const Duration(milliseconds: 1000));
      await tester.pump();

      expect(receiveImageProvider, isNotNull);
    });
  });
}

class MockCacheManager extends Mock implements DefaultCacheManager {
  static const fileSystem = LocalFileSystem();

  @override
  Stream<FileResponse> getImageFile(
    String url, {
    String? key,
    Map<String, String>? headers,
    bool withProgress = false,
    int? maxHeight,
    int? maxWidth,
  }) async* {
    yield FileInfo(
      fileSystem
          .file('./test/assets/13707135.png'), // Return your image file path
      FileSource.Cache,
      DateTime(2050),
      url,
    );
  }
}

[smith897]

The best and simplest solution I've found is to create a wrapper widget for CachedNetworkImage that uses a regular network image if it detects it's a testing environment. It'd be nice to not need a workaround like that.

[yasht01]

Are there any updates to this issue?

[fzyzcjy]

I personally workaround this by using JsonCacheInfoRepository instead of the default repository.