Cannot connect to Firestore emulator

[prescottprue]

Current behavior:

Connecting to the Firestore emulator within Cypress does work the way it does in a default browser. When attempting to open the app in cypress it shows the "Could Not reach Firestore backend" error.
Here is a sample repo showing the issue - instructions to reproduce are in the README.

When connecting normally in the browser, data is loaded from both the Real Time Database and Firestore emulators.

This issue has also been mentioned by another user in this stackoverflow post.

Desired behavior:

Emulator should be able to connect the same way it does when being used in the browser.

Test code to reproduce

1. Pull this sample repo
2. Run yarn install
3. As described in the README run the following:
   1. Start the emulators: yarn emulators
   2. In a new terminal window, seed the emulated databases with data: yarn seed
   3. Start the app by running: yarn start
   4. Visit localhost:3000 in your browser - notice that data loads from both emulated databases
   5. In another terminal window, open the test runner by running: yarn test
   6. Run the projects tests by clicking on "Projects.spec.js"

At this point the data does not load from the Firestore emulator within Cypress even though they will load in the browser (pictured below). This error appears in the console of the window opened by Cypress:

Versions

Happens with all cypress versions including:

• 3.8.3 - chrome and electron
• 4.0.1 - chrome and electron

[jennifer-shehane]

• Requires java download https://www.java.com/ which also requires that I restart my mac after download.

[prescottprue]

@jennifer-shehane Are you just making note of that? I have java installed and running fine on my end. As shown above - things render fine in the normal browser, just not the one spun up by Cypress.

[AugustinGrigorov]

@jennifer-shehane Are you just making note of that? I have java installed and running fine on my end. As shown above - things render fine in the normal browser, just not the one spun up by Cypress.

Since I am also having this issue I was wondering if it could be related to the Java version because I installed mine from brew. Have you done the same?

[prescottprue]

@AugustinGrigorov I believe I installed just from a manual download, but not positive, it could have been brew. I am running Java 10.0.2

[prescottprue]

As noted in #2374 - passing experimentalForceLongPolling: true seems to make things work even in the provided repro.

That said, I don't think that is a good long term solution since it may be removed at some point (as noted in this issue on the Firebase JS SDK). It think it would be best to have full documentation around how this is handled in Cypress and ways to debug webchannel traffic in general (since Firestore is probably not the only setup like this)

[TDAK1509]

As noted in #2374 - passing experimentalForceLongPolling: true seems to make things work even in the provided repro.

That said, I don't think that is a good long term solution since it may be removed at some point (as noted in this issue on the Firebase JS SDK). It think it would be best to have full documentation around how this is handled in Cypress and ways to debug webchannel traffic in general (since Firestore is probably not the only setup like this)

Thanks, this works for me.

const db = firebase.firestore();

if (location.hostname === "localhost") {
  db.settings({
    experimentalForceLongPolling: true,
  });
}

[WUKS87]

How should I enable this in AgnularFire?

[WUKS87]

I added it the same as above but in AngularFire instance. Thanks!

[ANDREYDEN]

If you are using emulators and include experimentalForceLongPolling, make sure to specify the merge option as well:

this.db = firebase.firestore();
this.db.useEmulator('localhost', 8080);

this.db.settings({
    experimentalForceLongPolling: true,
    merge: true
});

In our case experimentalForceLongPolling was overriding the emulator setup and cypress was trying to connect to the production DB.

[dominic-ks]

For anyone looking to do this with @angular/fire I managed it this way in the module.ts where I am importing AngularFirestoreModule, NB. I decided to check specifically for the presence of Cypress so that it uses normal settings for general development.

I think this would possibly be an issue if you are using Angular Universal for SSR, but I'm not on this project and am not sure how you can get an SSR friendly window object in a module.ts file anyway!

import { AngularFirestoreModule } from '@angular/fire/firestore';
import { SETTINGS } from '@angular/fire/firestore';

@NgModule({
  declarations: [],
  imports: [
    // ...my other imports
    AngularFirestoreModule,
  ],
  providers: [
    // if Cypress is defined use the settings, otherwise just use defaults:
    { provide: SETTINGS, useValue: ( window['Cypress'] ? {
      experimentalForceLongPolling: true,
      merge: true,
    } : SETTINGS )},
    // my other providers
  ],
  exports: [],
})
export class MyModule { }

[m3h0w]

Would it make sense to mention this somewhere in the official docs? I just wasted 2 days debugging this. Ran both into the @ANDREYDEN mentioned problem and the main, experimentalForceLongPolling problem.

[ingusjan]

For Firebase SDK v9 people trying to use experimentalForceLongPolling, you'll have to use v8 compat mode and change how you initialise the app a bit.

Here's what I used for Cypress 9.1.1 + Firebase 9.6.1:

import { connectFirestoreEmulator, getFirestore } from "firebase/firestore";
import "firebase/compat/firestore"; 
import firebase from "firebase/compat/app";

const app = firebase.initializeApp({ ... });  // 👈

export const db = getFirestore(app);

if (process.env.NODE_ENV === "development") {
  connectFirestoreEmulator(db, "localhost", 8080);
  // ...your other emulators

  firebase.firestore().settings({
    useFetchStreams: false,
    experimentalForceLongPolling: true, // 👈
    merge: true,
  });
}

There might be a better way for setting Firestore settings in v9 - the docs weren't so clear.

[prescottprue]

@ingusjan I believe you can use the initializeFirestore function like so:

import { initializeApp } from "firebase/app"
import { initializeFirestorer } from "firebase/firestore";

const app = initializeApp()
const db = initializeFirestore(app, {
  useFetchStreams: false,
  host: 'localhost:8080',
  experimentalForceLongPolling: true, // 👈
});

// The following can also be done instead of passing emulator config in settings
// connectFirestoreEmulator(db, 'localhost', 8080);

Also, you can pass emulator config that way, or as shown in the emulator setup docs using connectFirestoreEmulator. If you are using reactfire, you can leverage the useInitFirestore like so:

import { initializeFirestore, enableIndexedDbPersistence } from 'firebase/firestore'
import { useInitFirestore } from 'reactfire'

export default function SetupFirestore() {
  const { status, data: firestoreInstance } = useInitFirestore(async (firebaseApp) => {
    const firestoreSettings = {
      host: 'localhost:8080',
      ssl: false,
    };
    if (window.Cypress) {
      // Needed for Firestore support in Cypress (see https://github.com/cypress-io/cypress/issues/6350)
      firestoreSettings.experimentalForceLongPolling = true;
    }

    const db = initializeFirestore(firebaseApp, firestoreSettings);
    await enableIndexedDbPersistence(db);
    return db;
  });

  return null
}

Full example app of ^ available in generator-react-firebase react-firestore example with it's SetupFirestore component (disclaimer - I'm the author of generator-react-firebase which is a tool for starting/scaffolding react/firebase projects)

[jwmcelr]

Added this comment in ticket #2374 that I believe also applies here. I believe I've been able to get it to work without the experimentalForceLongPolling option turned on, which has greatly increased the performance of our tests.

[mjpoo]

There is a good solution that worked for me (Angular 13, AngularFire 7, Firebase 9, Cypress 10) at https://stackoverflow.com/a/73854687/381124

[Hypenate]

Running into the same issue.
Using compat of AngularFire

[kingjordan]

There is a good solution that worked for me (Angular 13, AngularFire 7, Firebase 9, Cypress 10) at https://stackoverflow.com/a/73854687/381124

@mjpoo were you able to get auth working in the same way. I cannot get cyprus e2e to login against the firebase auth emulators

[tja4472]

@kingjordan Have a look at:
https://github.com/tja4472/ngrx-task/blob/master/cypress/support/commands.ts#L221
https://github.com/tja4472/ngrx-task/blob/master/src/app/app-firebase.module.ts#L28