How to test canvas with testWidgets in a flutter mobile app project

Question

I was reading about how to build tests for flutter app widgets with the testWidgets function, like this test which comes by default when creating a new flutter project:

// <project>/test/widget_test.dart
void main() {
  testWidgets('Counter increments smoke test', (WidgetTester tester) async {
    await tester.pumpWidget(CounterApp());
    // validate counter starts at zero
    expect(find.text('0'), findsOneWidget);
    
    await tester.tap(find.byIcon(Icons.add));
    await tester.pump();

    expect(find.text('0'), findsNothing);
    expect(find.text('1'), findsOneWidget);
  }
}

But how would one test a canvas to see if the drawings/patterns and paragraphs are being displayed correctly? Does the finder object finds a Text widget if I draw a paragraph with canvas.drawParagraph(...)? I couldn't find info about this in the docs.

Solution

Testing Canvas in general (no matter the technology) should be performed using visual testing (or visual regression testing).

flutter_test package provides matchesGoldenFile function that makes it possible. There's a nice tutorial on Flutter's Github that will guide you through.

Comments

[jamesdlin]

You might want to look into using matchesGoldenFile to compare screenshots.