matchesGoldenFile function
Asserts that a Finder, Future<ui.Image>, or ui.Image matches the
golden image file identified by key
, with an optional version
number.
For the case of a Finder, the Finder must match exactly one widget and the rendered image of the first RepaintBoundary ancestor of the widget is treated as the image for the widget. As such, you may choose to wrap a test widget in a RepaintBoundary to specify a particular focus for the test.
The key
may be either a Uri or a String representation of a URL.
The version
is a number that can be used to differentiate historical
golden files. This parameter is optional.
This is an asynchronous matcher, meaning that callers should use expectLater when using this matcher and await the future returned by expectLater.
Golden File Testing
The term golden file refers to a master image that is considered the true rendering of a given widget, state, application, or other visual representation you have chosen to capture.
The master golden image files that are tested against can be created or
updated by running flutter test --update-goldens
on the test.
await expectLater(
find.text('Save'),
matchesGoldenFile('save.png'),
);
await expectLater(
image,
matchesGoldenFile('save.png'),
);
await expectLater(
imageFuture,
matchesGoldenFile(
'save.png',
version: 2,
),
);
await expectLater(
find.byType(MyWidget),
matchesGoldenFile('goldens/myWidget.png'),
);
Including Fonts
Custom fonts may render differently across different platforms, or between different versions of Flutter. For example, a golden file generated on Windows with fonts will likely differ from the one produced by another operating system. Even on the same platform, if the generated golden is tested with a different Flutter version, the test may fail and require an updated image.
By default, the Flutter framework uses a font called 'Ahem' which shows squares instead of characters, however, it is possible to render images using custom fonts. For example, this is how to load the 'Roboto' font for a golden test:
testWidgets('Creating a golden image with a custom font', (WidgetTester tester) async {
// Assuming the 'Roboto.ttf' file is declared in the pubspec.yaml file
final Future<ByteData> font = rootBundle.load('path/to/font-file/Roboto.ttf');
final FontLoader fontLoader = FontLoader('Roboto')..addFont(font);
await fontLoader.load();
await tester.pumpWidget(const MyWidget());
await expectLater(
find.byType(MyWidget),
matchesGoldenFile('myWidget.png'),
);
});
The example above loads the desired font only for that specific test. To load
a font for all golden file tests, the FontLoader.load()
call could be
moved in the flutter_test_config.dart
. In this way, the font will always be
loaded before a test:
Future<void> testExecutable(FutureOr<void> Function() testMain) async {
setUpAll(() async {
final FontLoader fontLoader = FontLoader('SomeFont')..addFont(someFont);
await fontLoader.load();
});
await testMain();
}
See also:
- goldenFileComparator, which acts as the backend for this matcher.
- LocalFileComparator, which is the default GoldenFileComparator
implementation for
flutter test
. - matchesReferenceImage, which should be used instead if you want to verify that two different code paths create identical images.
- flutter_test for a discussion of test configurations, whereby callers may swap out the backend for this matcher.
Implementation
AsyncMatcher matchesGoldenFile(Object key, {int? version}) {
return switch (key) {
Uri() => MatchesGoldenFile(key, version),
String() => MatchesGoldenFile.forStringPath(key, version),
_ => throw ArgumentError('Unexpected type for golden file: ${key.runtimeType}'),
};
}