"ReferenceError: fetch is not defined", when Jest test imports Firesbase library

I have a monorepo, which contains Angular applications and libraries. One of the library contains an Angular FirestoreService to access Firestore database. The application, when started, works by design, using the FirestoreService properly. On the other hand, any Jest component test in the app, which implicitly refers to FirestoreService fails with:

Test suite failed to run

ReferenceError: fetch is not defined

1 | import { inject, Inject } from '@angular/core';
2 | import { FirestoreDoc } from './firestore-doc';
> 3 | import { collection, Firestore, getDocs, limit, query } from '@angular/fire/firestore';
| ^
4 |
5 | @Inject({ providedIn: 'root' })
6 | export class FirestoreService {

at Object.<anonymous> (../../node_modules/firebase/node_modules/@firebase/auth/src/platform_node/index.ts:33:26)
at Object.<anonymous> (../../node_modules/firebase/node_modules/@firebase/auth/dist/node/index.js:5:12)
at Object.<anonymous> (../../node_modules/firebase/auth/dist/index.cjs.js:5:12)
at Object.<anonymous> (../../node_modules/rxfire/auth/index.cjs.js:5:12)
at Object.<anonymous> (../../node_modules/@angular/fire/fesm2022/angular-fire-auth.mjs:9:80)
at Object.<anonymous> (../../node_modules/@angular/fire/fesm2022/angular-fire-firestore.mjs:8:31)
at Object.<anonymous> (../../libs/firestore/src/lib/firestore/firestore.service.ts:3:1)
at Object.<anonymous> (../../libs/firestore/src/index.ts:1:1)
at Object.<anonymous> (src/app/nx-welcome.component.ts:3:1)
at Object.<anonymous> (src/app/nx-wellcome.component.spec.ts:2:1)


To make to understand the issue easier, I created an Nx monorepo from scratch and added a library on top of the default application. The test I run:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NxWelcomeComponent } from './nx-welcome.component';

describe("NxWelcomeComponent", () => {
let component: NxWelcomeComponent;
let fixture: ComponentFixture<NxWelcomeComponent>;

beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [NxWelcomeComponent],
}).compileComponents();

fixture = TestBed.createComponent(NxWelcomeComponent);
component = fixture.componentInstance;
})

it("should be created", () => {
expect(component).toBeTruthy();
})
})


Interestingly here I even didn't defined the FirestoreService as Provider, the test already complains about the import of @angular/fire/firestore. I also added the missing Provider, but it doesn't make any change. The component under test is:

import { Component, inject, OnInit, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FirestoreDoc, FirestoreService } from '@angular-monorepo/firestore';

@Component({
selector: 'app-nx-welcome',
imports: [CommonModule],
template: `
<h2>Firestore Issue</h2>
<ul>
@for (doc of documents; track doc.name) {
<li>{{doc.name}} - {{doc.description}}</li>
}
</ul>
`,
styles: [],
encapsulation: ViewEncapsulation.None,
})
export class NxWelcomeComponent implements OnInit {
readonly firestoreService = inject(FirestoreService);
documents: FirestoreDoc[] = [];

async ngOnInit(): Promise<void> {
this.documents = await this.firestoreService.loadAll();
}
}


And finally the service, which is used from the app component:

import { inject, Inject } from '@angular/core';
import { FirestoreDoc } from './firestore-doc';
import { collection, Firestore, getDocs, limit, query } from '@angular/fire/firestore';

@Inject({ providedIn: 'root' })
export class FirestoreService {
protected readonly firestore = inject(Firestore);
private collection;

constructor() {
this.collection = collection(this.firestore, 'firestore-doc');
}

async loadAll(): Promise<FirestoreDoc[]> {
const results = await getDocs(query(this.collection, ...[], ...[], limit(99)));
const content: FirestoreDoc[] = [];
results.docs.map((doc) => {
content.push(doc.data() as FirestoreDoc);
});

return new Promise<FirestoreDoc[]>((resolve, reject) => {
resolve(content);
});
}
}


Interestingly, If I write a Jest test agains this service, defined in the same library, side by the service source, I do not get any issue. The error pops up only, if FireStore in invoked/imported, indirectly outside of the library, ie. from the application. Again, the production code works as designed, the error appears only with unit tests. That's why recomendations like I have to install node-fetch and import doesn't help, because all the required dependencies are intalled. My project configuration is:

{
"name": "@angular-monorepo/source",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"run-firebase-emulator": "cd apps/firestore-issue && firebase emulators:start --import ./data",
"serve-firestore-issue": "nx run firestore-issue:serve",
"run-failing-test": "jest apps/firestore-issue/src/app/nx-wellcome.component.spec.ts"
},
"private": true,
"dependencies": {
"@angular/common": "~19.2.0",
"@angular/compiler": "~19.2.0",
"@angular/core": "~19.2.0",
"@angular/fire": "^19.0.0",
"@angular/forms": "~19.2.0",
"@angular/platform-browser": "~19.2.0",
"@angular/platform-browser-dynamic": "~19.2.0",
"@angular/router": "~19.2.0",
"rxjs": "~7.8.0",
"uuid": "^11.0.5",
"zone.js": "~0.15.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "~19.2.0",
"@angular-devkit/core": "~19.2.0",
"@angular-devkit/schematics": "~19.2.0",
"@angular/cli": "~19.2.0",
"@angular/compiler-cli": "~19.2.0",
"@angular/language-service": "~19.2.0",
"@eslint/js": "^9.8.0",
"@nx/angular": "20.5.0",
"@nx/devkit": "20.5.0",
"@nx/eslint": "20.5.0",
"@nx/eslint-plugin": "20.5.0",
"@nx/jest": "20.5.0",
"@nx/js": "20.5.0",
"@nx/playwright": "20.5.0",
"@nx/web": "20.5.0",
"@nx/workspace": "20.5.0",
"@playwright/test": "^1.36.0",
"@schematics/angular": "~19.2.0",
"@swc-node/register": "~1.9.1",
"@swc/core": "~1.5.7",
"@swc/helpers": "~0.5.11",
"@types/jest": "^29.5.12",
"@types/node": "18.16.9",
"@typescript-eslint/utils": "^8.19.0",
"angular-eslint": "^19.2.0",
"autoprefixer": "^10.4.0",
"eslint": "^9.8.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-playwright": "^1.6.2",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"jest-preset-angular": "~14.4.0",
"jsonc-eslint-parser": "^2.1.0",
"ng-packagr": "~19.2.0",
"nx": "20.5.0",
"postcss": "^8.4.5",
"postcss-url": "~10.1.3",
"prettier": "^2.6.2",
"ts-jest": "^29.1.0",
"ts-node": "10.9.1",
"tslib": "^2.3.0",
"typescript": "~5.7.2",
"typescript-eslint": "^8.19.0"
}
}


Any Idea what I oversee?

Continue reading...