Flutter网络图片Mock测试：首次测试与第二、三次测试颜色不一致问题咨询

我之前也踩过这个坑！问题根源就在mockNetworkImagesFor的默认行为上：它会为每个NetworkImage生成随机颜色的占位图，所以第一次测试和后续测试生成的图片颜色自然不一样，直接导致golden测试对比失败。

核心原因 #

默认情况下，mockNetworkImagesFor拦截网络图片请求后，会自动生成一个随机颜色的占位图返回。每次测试运行时这个随机颜色都会变化，你的golden文件自然就匹配不上了。

解决方案：固定Mock图片内容 #

我们需要让mock返回固定的图片内容，而不是随机生成的。这里有几种实用的实现方式：

方法1：生成固定颜色的占位图

借助image包生成一个纯色的固定图片，让mock HttpClient返回这个图片的字节数据即可：

首先在pubspec.yaml中添加依赖：

dev_dependencies:
  image: ^4.0.17 # 用最新版本即可

然后修改测试代码：

import 'dart:typed_data';
import 'package:flutter_test/flutter_test.dart';
import 'package:image/image.dart' as img;
import 'package:http/http.dart' as http;
import 'package:mockito/mockito.dart';

// 定义Mock HttpClient类
class MockHttpClient extends Mock implements http.Client {}

void main() {
  testWidgets('CircleAvatar golden test with fixed mock image', (tester) async {
    // 生成一个固定的纯红色图片（尺寸可按需调整）
    final fixedImage = img.Image(width: 200, height: 200);
    img.fill(fixedImage, color: img.ColorRgb8(255, 0, 0));
    final imageBytes = img.encodePng(fixedImage);

    await mockNetworkImagesFor(() async {
      // 创建Mock HttpClient并设置响应规则
      final client = MockHttpClient();
      when(client.get(Uri.parse(HttpConstants.defaultAvatarUrl)))
          .thenAnswer((_) async => http.Response.bytes(imageBytes, 200));

      // 用Mock HttpClient替换默认客户端
      HttpOverrides.runZoned(() async {
        final testPage = CircleAvatar(
          radius: Sizes.profilePictureRadius,
          backgroundImage: NetworkImage(HttpConstants.defaultAvatarUrl),
        );
        await TestUtils.pumpWidget(tester, testPage);
        // 建议直接查找CircleAvatar而非Container，定位更准确
        await expectLater(
          find.byType(CircleAvatar),
          matchesGoldenFile('test_01.png'),
        );
      }, createHttpClient: (_) => client);
    });
  });
}

方法2：使用本地固定图片文件

如果你想模拟真实图片的展示效果，可以直接读取本地测试资源的字节：

import 'dart:io';
import 'dart:typed_data';

// ... 其他代码省略

// 读取本地测试图片的字节
final imageBytes = File('test/fixtures/default_avatar.png').readAsBytesSync();

// 后续逻辑和方法1一致，让Mock HttpClient返回这个字节数据

方法3：简化版（跳过网络Mock）

如果你的测试不需要严格模拟网络请求流程，只是验证UI展示效果，可以直接用MemoryImage替代NetworkImage，完全省去网络mock的步骤：

testWidgets('CircleAvatar golden test with MemoryImage', (tester) async {
  // 生成固定图片字节
  final fixedImage = img.Image(width: 200, height: 200);
  img.fill(fixedImage, color: img.ColorRgb8(255, 0, 0));
  final imageBytes = img.encodePng(fixedImage);

  final testPage = CircleAvatar(
    radius: Sizes.profilePictureRadius,
    backgroundImage: MemoryImage(imageBytes),
  );
  await TestUtils.pumpWidget(tester, testPage);
  await expectLater(
    find.byType(CircleAvatar),
    matchesGoldenFile('test_01.png'),
  );
});

额外小贴士 #

• 原代码中find.byType(Container)定位不够精准，CircleAvatar内部包含多个Container，直接查找CircleAvatar组件能避免不必要的匹配错误。
• 每次修改mock图片内容后，记得重新生成golden文件（运行测试时加上--update-goldens参数）。

内容的提问来源于stack exchange，提问作者Pairat Atichart