How to mock FirebaseAuth inside widget and integration tests that use the Firebase UI packages?

[bizz84]

When using Firebase UI, how can we mock the underlying Firebase SDK so we can run widget and integration tests that don't talk with the underlying Firebase backend?

This is easy enough to do for projects that don't use the Firebase UI. For example, apps that use Riverpod can do this:

final firebaseAuthProvider = Provider<FirebaseAuth>((ref) {
  return FirebaseAuth.instance;
});

And this in the tests:

void main() {
  testWidgets('custom sign in screen ...', (tester) async {
    await tester.pumpWidget(
      const ProviderScope(
        overrides: [
           firebaseAuthProvider.overrideWithValue(MockFirebaseAuth()),
        ],
        child: MaterialApp(
          home: CustomSignInScreen(),
        ),
      ),
    );
  });
}

But I can't see any way to override the FirebaseAuth instance that is used internally by Firebase UI (or at least it's not documented). Figured this out but still stuck when running the tests, see my comment below.

Ideally there should be a way to still use mocks (whether from packages like mocktail or the Firebase-specific mocks mentioned in this comment).

Any advice?

[bizz84]

UPDATE I just noticed that the SignInScreen takes an auth argument, so I've been able to do this:

final firebaseAuthProvider = Provider<FirebaseAuth>((ref) {
  return FirebaseAuth.instance;
});

class CustomSignInScreen extends ConsumerWidget {
  const CustomSignInScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return SignInScreen(
        auth: ref.watch(firebaseAuthProvider),
        providers: [EmailAuthProvider()],   
    );
  }
}

Then, I can do this in the tests:

import 'package:faker_app_flutter_firebase/src/routing/app_router.dart';
import 'package:faker_app_flutter_firebase/src/screens/custom_sign_in_screen.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:mocktail/mocktail.dart';

class MockFirebaseAuth extends Mock implements FirebaseAuth {}

class MockFirebaseApp extends Mock implements FirebaseApp {}

void main() async {
  testWidgets('custom sign in screen ...', (tester) async {
    final mockAuth = MockFirebaseAuth();
    final mockFirebaseApp = MockFirebaseApp();
    when(() => mockAuth.app).thenReturn(mockFirebaseApp);
    await tester.pumpWidget(
      ProviderScope(
        overrides: [
          firebaseAuthProvider.overrideWithValue(mockAuth),
        ],
        child: const MaterialApp(
          home: CustomSignInScreen(),
        ),
      ),
    );
  });
}

This takes care of injecting the MockFirebaseAuth into the SignInScreen.

However, running the test causes this exception:

══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following _Exception was thrown building KeyedSubtree-[GlobalKey#13fa2]:
Exception: You must call Firebase.initializeApp() before calling configureProviders()

The relevant error-causing widget was:
  Scaffold
  Scaffold:file:///Users/andrea/work/codewithandrea/flutter-ecommerce-course/faker_app_flutter_firebase/lib/src/screens/custom_sign_in_screen.dart:13:12

I've also tried using the MockFirebaseAuth class from the firebase_auth_mocks rather than using mocktail, but I get the same error.

---

Overall, it would be good to have some guidance/documentation/examples showing how to write widget and integration tests with Firebase UI.

Something along the lines of this guide, but updated for Firebase UI would be great:

https://firebase.flutter.dev/docs/testing/testing/

[RUPA0033]

https://jekyllrb.com/

[RUPA0033]

final firebaseAuthProvider = Provider((ref) {
return FirebaseAuth.instance;
});

[RUPA0033]

---

[RUPA0033]

__final firebaseAuthProvider = Provider((ref) {
return FirebaseAuth.instance;
});

[Desync-o-tron]

No guide to being able to setup a mock here is quite annoying.
https://pub.dev/packages/firebase_ui_auth is touted as an easy way to setup sign in, yet it hamstrings you when you try and set up tests... hopefully, it's just a documentation problem.

[Desync-o-tron]

Ah.. found it.

In your test setup call this.

// import 'package:firebase_ui_auth/firebase_ui_auth.dart';

@visibleForTesting
void setFirebaseUiIsTestMode(bool isTestMode) {
  _isTestMode = isTestMode;
}

If you look at the call stack from the error, configureProviders(...) will check if it's in test mode before throwing wrt initializing.
https://github.com/firebase/FirebaseUI-Flutter/blob/main/packages/firebase_ui_auth/lib/firebase_ui_auth.dart