How do I test reactfire with jest + testing library?

[supernaut]

I've set up a new react app in a Nx monorepo. The test generated by the scaffolding script worked perfectly, until I added reactfire. The app works as expected when being run and built, but fails testing. The first test passes, then the second test fails with the error:

FirebaseError: Firestore has already been started and its settings can no longer be changed. You can only modify settings before calling any other methods on a Firestore object.

Here is my test-spec:

import { FirebaseProvider } from '@app-name/firebase';
import { render } from '@testing-library/react';
import App from './app';
describe('App', () => {
  it('should render successfully', () => {
    const { baseElement } = render(
      <FirebaseProvider>
        <App />
      </FirebaseProvider>
    );
    expect(baseElement).toBeTruthy();
  });
  it('should display the title', () => {
    const { getByText } = render(
      <FirebaseProvider>
        <App />
      </FirebaseProvider>
    );
    expect(getByText('App Name')).toBeTruthy();
  });
});

FirebaseProvider is just a wrapper around FirebaseAppProvider and FirestoreProvider:

import { FirebaseOptions } from 'firebase/app';
import { connectFirestoreEmulator, getFirestore } from 'firebase/firestore';
import { FunctionComponent, memo } from 'react';
import {
  FirebaseAppProvider,
  FirestoreProvider,
  useFirebaseApp,
} from 'reactfire';

const firebaseConfig: FirebaseOptions = {
  apiKey: process.env.NX_FIREBASE_API_KEY,
  authDomain: process.env.NX_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NX_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NX_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NX_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NX_FIREBASE_APP_ID,
  measurementId: process.env.NX_FIREBASE_MEASUREMENT_ID,
};

const FirebaseServicesProvider: FunctionComponent = memo(({ children }) => {
  const firestore = getFirestore(useFirebaseApp());

  if (process.env.NODE_ENV !== 'production') {
    connectFirestoreEmulator(firestore, 'localhost', 8080);
  }

  return <FirestoreProvider sdk={firestore}>{children}</FirestoreProvider>;
});

export const FirebaseProvider: FunctionComponent = memo(({ children }) => {
  return (
    <FirebaseAppProvider firebaseConfig={firebaseConfig}>
      <FirebaseServicesProvider>{children}</FirebaseServicesProvider>
    </FirebaseAppProvider>
  );
});

export default FirebaseProvider;

Am I doing something fundamentally wrong here?

[jhuleatt]

Hi @supernaut, thanks for the question! This made me realize that ReactFire's test suite is setting up Firestore differently from how the docs say to do it. I'm converting this into an issue so we can investigate.