Test behavior of widgets in Flutter

Our widget tests should give us confidence about how they respond to user interactions - its behavior.

Using the CustomButton widget from a previous post, we can test if it fires its onPressed callback when tapped on all platforms.

Testing the behavior

import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'path/to/CustomButton.dart';

void main() {
  Widget buildApp({VoidCallback onPressed}) {
    return MaterialApp(
      home: CustomButton(
        onPressed: onPressed,
      ),
    );
  }

  group('CustomButton >', () {
    group('behavior >', () {
      testWidgets(
        'calls onPressed when tapped on iOS',
        (tester) async {
          debugDefaultTargetPlatformOverride = TargetPlatform.iOS;

          final log = <int>[];
          final onPressed = () => log.add(0);

          await tester.pumpWidget(buildApp(onPressed: onPressed));
          await tester.tap(find.byType(CustomButton));
          expect(log.length, 1);
          await tester.tap(find.byType(CustomButton));
          await tester.tap(find.byType(CustomButton));
          expect(log.length, 3);

          debugDefaultTargetPlatformOverride = null; <-- this is required
        },
      );

      testWidgets(
        'calls onPressed when tapped on other platforms',
        (tester) async {
          final log = <int>[];
          final onPressed = () => log.add(0);

          await tester.pumpWidget(buildApp(onPressed: onPressed));
          await tester.tap(find.byType(CustomButton));
          expect(log.length, 1);
          await tester.tap(find.byType(CustomButton));
          await tester.tap(find.byType(CustomButton));
          expect(log.length, 3);
        },
      );
    });
  });
}

Using the same approach to override the platform, we can easily verify that our widget behaves properly on all platforms.

Now, if we change our implementation, our tests will assert if the behavior was maintained.

We can change from a CupertinoButton to a Container + GestureDetector on iOS and our tests will continue to pass because it's the same behavior:

Widget buildCupertinoWidget(BuildContext context) {
  return GestureDetector(
    onTap: onPressed,
    child: Container(
      child: Text('Click me'),
    ),
  );
}

But if we remove the GestureDetector, our tests will fail because the widget doesn't behave as before:

Widget buildCupertinoWidget(BuildContext context) {
  return Container(
    child: Text('Click me'),
  );
}

Notes

We must reset debugDefaultTargetPlatformOverride to null by the end of every test case, otherwise Flutter will throw an error;
The example here is a bit specific, but you should take the approach and apply to all your widgets.

If you're have any suggestions to improve this example, feel free to share it in the comments.

I hope you enjoyed this post and follow me on any platform for more.

Blog

Test behavior of widgets in Flutter

Arthur Denner

Testing the behavior

Notes

Join Our Newsletter. No Spam, Only the good stuff.

Related