ReferenceError: self is not defined on Jest tests firebase@10.12.3

[atomassoni]

Operating System

iOS 16+

Browser Version

Chrome latest

Firebase SDK Version

10.12.3

Firebase SDK Product:

Analytics, Auth, Firestore, Functions, Remote-Config

Describe your project's tooling

Ionic Stencil app with Jest

Describe the problem

Running Jest tests I got this error anywhere I had imported firebase, I'm using the emulator on jest. Here is my command:

"test.ci": "firebase emulators:exec --only firestore 'stencil test --spec --ci --coverage --exit'",

Rolling back to firebase@10.12.2 fixed the issue.

FAIL src/components/pages/sw-subscribe-success-page/sw-subscribe-success-page.spec.ts
  ● Test suite failed to run
    ReferenceError: self is not defined
       9 | import { Analytics, getAnalytics } from "firebase/analytics"
    > 11 | import firebaseCompat from "firebase/compat/app"
         | ^
      12 | import "firebase/compat/auth"
      13 | import "firebase/compat/firestore"
      14 | import "firebase/compat/functions"
      at Object.<anonymous> (node_modules/@firebase/app-compat/src/index.ts:26:21)
      at Object.<anonymous> (node_modules/firebase/compat/app/dist/index.cjs.js:3:16)
      at Object.require (src/global/firebase.ts:11:1)
      at Object.require (src/global/native.ts:4:1)
      at Object.require (src/global/workout-utils.ts:2:1)
      at Object.require (src/reducers/edit-workout.ts:2:1)
      at Object.require (src/reducers/index.ts:5:1)
      at Object.require (src/store/index.ts:3:1)
      at Object.require (src/components/pages/sw-subscribe-success-page/sw-subscribe-success-page.tsx:3:1)
      at Object.<anonymous> (src/components/pages/sw-subscribe-success-page/sw-subscribe-success-page.spec.ts:1:1)

Steps and code to reproduce issue

For our app I can update from Firebase 10.12.2 to 10.12.3 to trigger the error. Rolling back to 10.12.2 fixes it.

[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.

[hsubox76]

May be related to #8315. The change seems to cause isBrowser() to pass in this environment where it previously failed, which causes this check: https://github.com/firebase/firebase-js-sdk/blob/master/packages/app-compat/src/index.ts#L26 to no longer short-circuit on the first condition, but continue to the second, where it fails to find global self. Need to check which of these assumptions is wrong.

Edit: Jest runs in Node so self doesn't exist. However, because it's using JSDOM to mimic the DOM for browser tests, window does exist. I guess we should probably leave isBrowser() as is, because when you're running Jest in JSDOM mode, you do want it to pass the isBrowser() check as it's pretending to be a browser. We should probably fix the (self as any).firebase check.

[hsubox76]

Actually I looked further into this and it looks like Jest is supposed to have self, if you are using JSDOM mode.
https://stackoverflow.com/questions/68678854/jest-test-suite-fails-with-message-self-is-not-defined

I'm not actually sure what kind of environment you have where window exists but self doesn't. I've tried to reproduce using the latest version of Jest, using both the node and jsdom testEnvironments. Can you share your Jest config? What Jest version are you using?