Mock a Widget in Flutter tests

Question

I am trying to create tests for my Flutter application. Simple example:

class MyWidget extends StatelessWidget {
   @override
   build(BuildContext context) {
      return MySecondWidget();
   }
}

I would like to verify that MyWidget is actually calling MySecondWidget without building MySecondWidget.

void main() {
   testWidgets('It should call MySecondWidget', (WidgetTester tester) async {
      await tester.pumpWidget(MyWidget());
      expect(find.byType(MySecondWidget), findsOneWidget);
   }
}

In my case this will not work because MySecondWidget needs some specific and complex setup (like an API key, a value in a Provider...). What I would like is to "mock" MySecondWidget to be an empty Container (for example) so it doesn't raise any error during the test.

How can I do something like that ?

Answer 1

There is nothing done out of the box to mock a widget. I'm going to write some examples/ideas on how to "mock"/replace a widget during a test (for example with a SizedBox.shrink().

But first, let me explain why I think this is not a good idea.

In Flutter you are building a widget tree. A specific widget has a parent and usually has one or several children.

Flutter chose a single pass layout algorithm for performance reasons (see this):

Flutter performs one layout per frame, and the layout algorithm works in a single pass. Constraints are passed down the tree by parent objects calling the layout method on each of their children. The children recursively perform their own layout and then return geometry up the tree by returning from their layout method. Importantly, once a render object has returned from its layout method, that render object will not be visited again until the layout for the next frame. This approach combines what might otherwise be separate measure and layout passes into a single pass and, as a result, each render object is visited at most twice during layout: once on the way down the tree, and once on the way up the tree.

From this, we need to understand that a parent needs its children to build to get their sizes and then render itself properly. If you remove its children, it might behave completely differently.

It is better to mock the services if possible. For example, if your child makes an HTTP request, you can mock the HTTP client:

HttpOverrides.runZoned(() {
  // Operations will use MyHttpClient instead of the real HttpClient
  // implementation whenever HttpClient is used.
}, createHttpClient: (SecurityContext? c) => MyHttpClient(c));

If the child needs a specific provider you can provide a dummy one:

testWidgets('My test', (tester) async {
  tester.pumpWidget(
    Provider<MyProvider>(
      create: (_) => MyDummyProvider(),
      child: MyWidget(),
    ),
  );
});

---

If you still want to change a widget with another one during your tests, here are some ideas:

1. Use Platform.environment.containsKey('FLUTTER_TEST')

You can either import Platform from dart:io (not supported on web) or universal_io (supported on web).

and your build method could be:

@override
Widget build(BuildContext context) {
  final isTest = Platform.environment.containsKey('FLUTTER_TEST');
  if (isTest) return const SizedBox.shrink();
  return // Your real implementation.
}

2. Use the annotation @visibleForTesting

You can annotate a parameter (ex: mockChild) that is only visible/usable in a test file:

class MyWidget extends StatelessWidget {
  const MyWidget({
    @visibleForTesting this.mockChild,
  });
  
  final Widget? child;

  @override
  Widget build(BuildContext context) {
    return mockChild ??  // Your real widget implementation here.
  }
}

And in your test:

tester.pumpWidget(
  MyWidget(
    mockChild: MyMockChild(),
  ),
);