Flutter：小部件测试中的 readAsBytes/readAsString

Question

I am trying to test a StatefulWidget with the following onPressed function.

      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.camera_alt),
        onPressed: () async {
          try {
            final filename = widget.randomStringGenerator?.call() ?? '';
            final path = join(
              (await getTemporaryDirectory()).path,
              '${filename}.png',
            );
            await widget.cameraController?.takePicture(path);
            final file = File(path);
            final image = await file.readAsBytes();
            widget.onPhotoTaken(image);
            await file.delete();
          } catch (e) {
            print(e);
          }
        },
      ),

and the following widget test:

void main() {
  Directory directory;
  group('PhotoWidget test', () {
    setUp(() async {
      // Create a temporary directory.
      directory = await Directory.systemTemp.createTemp();
      // Mock out the MethodChannel for the path_provider plugin.
      const MethodChannel('plugins.flutter.io/path_provider')
          .setMockMethodCallHandler(
        (MethodCall methodCall) async {
          if (methodCall.method == 'getTemporaryDirectory') {
            return directory.path;
          }
          return null;
        },
      );
    });

    tearDown(() async {
      await directory?.delete(
        recursive: true,
      );
    });

    testWidgets('onPictureTaken is called', (WidgetTester tester) async {
      // GIVEN
      Uint8List callbackImage;
      var expectedImage = base64.decode(
        'iVBORw0KGgoAAAANSUh'
        'EUgAAAAEAAAABCAYAAAA'
        'fFcSJAAAADUlEQVR42mNk+'
        'P+/HgAFhAJ/wlseKgAAAA'
        'BJRU5ErkJggg==',
      );
      var randomStringGenerator = () => 'test_simple_photo';
      // Join file path
      final file = File(join(
        directory.path,
        '${randomStringGenerator()}.png',
      ));
      // write image to expected path
      file.writeAsBytesSync(expectedImage);
      var cameraController = MockCameraController();
      when(cameraController.initialize()).thenAnswer((_) => Future.value());
      when(cameraController.value).thenReturn(
        CameraValue(
          isInitialized: false,
        ),
      );
      var photoPage = SimplePhotoPage(
        cameraController: cameraController,
        randomStringGenerator: randomStringGenerator,
        onPhotoTaken: (image) => callbackImage = image,
      );
      // WHEN
      await tester.pumpWidget(
        MaterialApp(
          home: photoPage,
        ),
      );
      await tester.tap(find.byType(FloatingActionButton));
      await tester.pumpAndSettle();
      // THEN
      expect(callbackImage, expectedImage);
    });
  });
}

However, this test fails and when debugging the test exits at

final image = await file.readAsBytes();

without any error or really any sign that anything went wrong. The interesting thing is when I switch to their sync counterparts ( readAsBytesSync() , deleteSync() ), the test passes.

From reading the source code for the dart io lib it seems readAsBytes runs in a separate isolate and it doesn't seem to complete the readAsBytes() future in the test isolate. I would like not to use the sync version of this method. Do you guys know how to accomplish this?

Answer 1

I also faced this issue, and wasn't able to figure out why the file read never executed (or no exceptions were thrown).

I ended up is using file package to replace 'dart:io' to pass in an interface to the widget for accessing the filesystem. This creates a constructor as such

import 'package:file/memory.dart';
import 'package:file/file.dart'

class FSWidget extends StatefulWidget{
  FileSystem _fs;
  
  FSWidget({FilesSystem? fileSystem}): _fs = fileSystem?? MemoryFileSystem();

  @override
    _PostScreenState createState() => _PostScreenState();
  }

}

This allows you to use to pass in your own filesystem for testing

Your temp file system access code becomes

...
final filename = widget.randomStringGenerator?.call() ?? '';
final tempDirectory = await widget._fs.systemTempDirectory.createTemp('tempDir');
final outputFile = tempDirectory.childFile('${filename}.png');

await widget.cameraController?.takePicture(outputFile.path);
widget.onPhotoTaken(outputFile);
await outputFile.delete();

...

You can now pass in a reference to your test filesystem to your widget

testWidgets('onPictureTaken is called', (WidgetTester tester) async {
  FileSystem testFS = MemoryFileSystem();
  // Add stuff to the filesystem
  ...
  await tester.pumpWidget(
    MaterialApp(
      home: FSWidget(filesystem: testFS),
    ),
  ...
  // Expect stuff from the filesystem