cypress: Cannot connect to Firestore emulator

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.

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,
  });
}

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 { }

As noted in https://github.com/cypress-io/cypress/issues/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)

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 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)