Firebase-js-sdk: "IDB requires a browser environment" when using Analytics/Performance

[dsgriffin]

Describe your environment

• Operating System: Mac OSX
• Firebase SDK version: 7.2.3
• Firebase Product: Analytics/Performance

Describe the problem

When trying to run setup (e.g. Jest tests in a Create-React-App project), getting IDB requires a browser environment when trying to include analytics and performance function calls. All other imports are fine.

Steps to reproduce:

Relevant Code:

When running a Jest test on a component that interacts with the Firebase setup (shown below)

import firebase from 'firebase/app';
import 'firebase/analytics';
import 'firebase/performance';
import 'firebase/firestore';
import 'firebase/auth';
...
export const analytics = firebase.analytics(); // Error: "IDB requires a browser environment"
export const performance = firebase.performance(); // Error: "IDB requires a browser environment"
export const firestore = firebase.firestore(); // Fine
export const auth = firebase.auth(); // Fine
export const storage = firebase.storage(); // Fine

If I run the test with a -- --browser flag it instead errors out at the import:

   ReferenceError: IDBIndex is not defined

      1 | import firebase from 'firebase/app';
    > 2 | import 'firebase/analytics';

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[Feiyang1]

Both services require indexedDB to work. As far as I understand, Jest runs in Node where indexedDB is not available. 2 possible options:

1. Include an indexeddb shim in your tests before initializing Firebase services, e.g. indexeddbshim
2. Mock firebase services instead of initializing the real Firebase services in your tests.

What is the --browser flag? I can't find any documentation about it. When I passed it to react-scripts test, I got ReferenceError: regeneratorRuntime is not defined.
Also I'm not aware of such flag for Jest.

[robbie-c]

I had a similar problem when trying to use the JS SDK in an expo app (another non-browser environment), and made an Issue here https://github.com/firebase/firebase-js-sdk/issues/2244

Probably your best bet is to mock out any calls to Firebase as @Feiyang1 suggested

[dsgriffin]

1. Include an indexeddb shim in your tests before initializing Firebase services, e.g. indexeddbshim

Tried setting up indexeddbshim in my setupTests.js (CRA Jest file) and got

UnknownError: Could not create object store "firebase-installations-store"
TransactionInactiveError: A request was placed against a transaction which is currently not active, or which is finished

What is the --browser flag? I can't find any documentation about it. When I passed it to react-scripts test, I got ReferenceError: regeneratorRuntime is not defined.
Also I'm not aware of such flag for Jest.

Can't find a reference now but found it on a Create-React-App github issue as a solution for some vaguely related issue, can't find it now though.

1. Mock firebase services instead of initializing the real Firebase services in your tests.

I'm using Jest setup + Firebase Emulator Suite to create a second "fake" instance that I actually operate on by changing Firestore settings as below etc. However I still need to include the main instance in my provider config setup for Jest due to no auth support with the emulator. I am not sure if either case would work in mine.

// setGlobalVars(global);

const firebaseApp = firebase.initializeApp({ projectId: PROJECT_ID }, SECONDARY_APP_ID);
const firestore = firebaseApp.firestore();
firestore.settings({ host: "localhost:8080", ssl: false });