Once your view model tests are complete, you’ve already created most of the test setup needed to write widget tests. Widget tests help ensure that your UI components behave as expected when connected to real or fake logic layers, like the view model and repositories.

In this section, we'll walk through testing the HomeScreen widget using a view model and faked dependencies. This ensures that your view layer is functioning correctly under controlled, testable conditions.

Test Setup: Fakes & Router Mock

Before testing the widget, we define the required fakes and mocks in the test file:

home_screen_test.dart

void main() {
  group('HomeScreen tests', () {
    late HomeViewModel viewModel;
    late MockGoRouter goRouter;
    late FakeBookingRepository bookingRepository;

    setUp(() {
      bookingRepository = FakeBookingRepository()
        ..createBooking(kBooking);

      viewModel = HomeViewModel(
        bookingRepository: bookingRepository,
        userRepository: FakeUserRepository(),
      );

      goRouter = MockGoRouter();
      when(() => goRouter.push(any())).thenAnswer((_) => Future.value(null));
    });

    // Widget test methods will go here...
  });
}

ℹ️ Note: MockGoRouter is mocked using the mocktail package. While router mocking is beyond the scope of this case study, it’s useful for navigation scenarios.

loadWidget(): Injecting the Widget for Testing

After setting up dependencies, we define the loadWidget method, which wraps the widget tree in providers and themes required for testing.

void loadWidget(WidgetTester tester) async {
  await testApp(
    tester,
    ChangeNotifierProvider.value(
      value: FakeAuthRepository() as AuthRepository,
      child: Provider.value(
        value: FakeItineraryConfigRepository() as ItineraryConfigRepository,
        child: HomeScreen(viewModel: viewModel),
      ),
    ),
    goRouter: goRouter,
  );
}

This method prepares the widget with fake dependencies, including AuthRepository and ItineraryConfigRepository, required by HomeScreen other widgets up the tree.

testApp(): Building the Widget Tree

The testApp The utility method handles common setup tasks like screen size, localization, and theming. It looks like this:

testing/app.dart

void testApp(
  WidgetTester tester,
  Widget body, {
  GoRouter? goRouter,
}) async {
  tester.view.devicePixelRatio = 1.0;
  await tester.binding.setSurfaceSize(const Size(1200, 800));
  await mockNetworkImages(() async {
    await tester.pumpWidget(
      MaterialApp(
        localizationsDelegates: [
          GlobalWidgetsLocalizations.delegate,
          GlobalMaterialLocalizations.delegate,
          AppLocalizationDelegate(),
        ],
        theme: AppTheme.lightTheme,
        home: InheritedGoRouter(
          goRouter: goRouter ?? MockGoRouter(),
          child: Scaffold(
            body: body,
          ),
        ),
      ),
    );
  });
}

✅ testApp() abstracts boilerplate widget setup so you can focus on specific test logic.

When your architecture is well-structured, view and view model tests only require mocking repositories, not the view or UI logic itself. This approach leads to faster, more reliable tests and reduces brittleness in your test suite.