Angular testing with Firebase fails when testing the creation of components, but app works fine (NullInjectionError)

Question

I am developing a chat app with angular and firebase, it is almost finished, everything seems to work fine... but the testing is giving a lot of weird errors.

For example, it says it can't create some components but the thing is, when you run the app, they are created and run with no problem.

As far as I have been investigating, it could be a problem of angular and firebase different versions like told here

NullInjectorError: No provider for InjectionToken angularfire2.app.options! 2021

I tested what is told there but nothing works:

• I tried to use only one of the APIs but it keeps on throwing the same error or the code must be changed to make it work with the other API version. I think until now I was using both APIS because the newer is installed with angular fire and the other is the way which is explained on docs. No problem until I did the testing.

• If I try to downgrade the firebase version, a lot of code doesn't work as well.

• Downgrading angular would return back many vulnerabilities which I have fixed with this angular version.

This is my app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { initializeApp,provideFirebaseApp } from '@angular/fire/app';
import { environment } from '../environments/environment';
import { provideAnalytics,getAnalytics,ScreenTrackingService,UserTrackingService } from '@angular/fire/analytics';
import { provideAuth,getAuth } from '@angular/fire/auth';
import { provideDatabase,getDatabase } from '@angular/fire/database';
import { provideFirestore,getFirestore } from '@angular/fire/firestore';
import { provideFunctions,getFunctions } from '@angular/fire/functions';
import { provideMessaging,getMessaging } from '@angular/fire/messaging';
import { providePerformance,getPerformance } from '@angular/fire/performance';
import { provideRemoteConfig,getRemoteConfig } from '@angular/fire/remote-config';
import { provideStorage,getStorage } from '@angular/fire/storage';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAnalyticsModule } from '@angular/fire/compat/analytics';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';

//components
import { ChatComponent } from './components/chat/chat.component';
import { LoginComponent } from './components/login/login.component';
import { PagenotfoundComponent } from './components/pagenotfound/pagenotfound.component';


//services
import { ChatService } from './services/chat-service/chat.service';

@NgModule({
  declarations: [
    AppComponent,
    ChatComponent,
    LoginComponent,
    PagenotfoundComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAnalyticsModule,
    AngularFirestoreModule,
    AppRoutingModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAnalytics(() => getAnalytics()),
    provideAuth(() => getAuth()),
    provideDatabase(() => getDatabase()),
    provideFirestore(() => getFirestore()),
    provideFunctions(() => getFunctions()),
    provideMessaging(() => getMessaging()),
    providePerformance(() => getPerformance()),
    provideRemoteConfig(() => getRemoteConfig()),
    provideStorage(() => getStorage())
  ],
  providers: [
    ScreenTrackingService,UserTrackingService, ChatService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

These are the dependencies I am using on package.json.

"dependencies": {
    "@angular/animations": "~13.2.5",
    "@angular/common": "~13.2.5",
    "@angular/compiler": "~13.2.5",
    "@angular/core": "~13.2.5",
    "@angular/fire": "^7.2.1",
    "@angular/forms": "~13.2.5",
    "@angular/platform-browser": "~13.2.5",
    "@angular/platform-browser-dynamic": "~13.2.5",
    "@angular/router": "~13.2.5",
    "rxjs": "~6.6.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4",
    "firebase": "^9.4.0",
    "rxfire": "^6.0.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.2.5",
    "@angular/cli": "~13.2.5",
    "@angular/compiler-cli": "~13.2.5",
    "@types/jasmine": "~3.8.0",
    "@types/node": "^12.11.1",
    "autoprefixer": "^10.4.2",
    "jasmine-core": "~3.8.0",
    "karma": "^6.3.16",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "postcss": "^8.4.6",
    "tailwindcss": "^3.0.23",
    "typescript": "~4.5.5"
  }

Which could be the problem?

Also the question that is coming to my head is, if the app seems to work fine (both in development and production), is it so important to do the testing, if it implies a lot of weird problems which actually don't happen on the real app, or changing things that could crash the app itself? Is the investment of time worth it, or changing an apparently fine code only to make it pass the tests?

Answer 1

I managed to solve the problem importing the app initializing method

AngularFireModule.initializeApp(environment.firebase),

on the

chat.service.spec.ts EDIT: You must also add it on the spec file of the components where you get this error

/*

  RouterTestingModule is the way to initialize the Router service 
  according to this:

  https://stackoverflow.com/questions/60409270/angular-9-error-this-constructor-was-not-compatible-with-dependency-injection

  Don´t try to inject as a regular service on the providers

*/


  beforeEach(() => {
    TestBed.configureTestingModule({
      imports:[RouterTestingModule,
        **AngularFireModule.initializeApp(environment.firebase),**
      ],
      providers: [ChatService,AngularFirestore,AngularFireAuth
      
      ]
    });

    service = TestBed.inject(ChatService);
    authService=TestBed.inject(AngularFireAuth);
    angularFirestore=TestBed.inject(AngularFirestore);

   
  });