test cases for angularFire multiple time App initialization issues

[Mahima-22]

Version info

Angular:12.0.2

Firebase:9.0.2

AngularFire:7.0.4

Other (e.g. Ionic, browser):5.7.0

Sample data

Component1.spec.ts

import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { getFunctions, provideFunctions } from '@angular/fire/functions';
import { getFirestore, provideFirestore, enableMultiTabIndexedDbPersistence } from '@angular/fire/firestore';
import { getDatabase, provideDatabase } from '@angular/fire/database';
import { getStorage, provideStorage } from '@angular/fire/storage';
import { getAuth, provideAuth } from '@angular/fire/auth';
import { environment } from 'src/environments/environment';

describe('Page', () => {

beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [Page],
      imports: [
        IonicModule.forRoot(),
        RouterModule.forRoot([]),
        FormsModule,
        RouterTestingModule,
        HttpClientTestingModule,
        provideFirebaseApp(() => initializeApp(environment.firebase)),
        provideAuth(() => getAuth()),
        provideFirestore(() => {
          const firestore = getFirestore();
          return firestore;
        }),
        provideDatabase(() => getDatabase()),
        provideStorage(() => getStorage()),
        provideFunctions(() => getFunctions()),
      ],
      providers: [],
      schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
    }).compileComponents();

    fixture = TestBed.createComponent(Page);
    router = TestBed.inject(Router); 
    component = fixture.componentInstance;
    // fixture.detectChanges();
  }));
Continue ...
})

Above code works well unless I write test cases for second compoenent. that is below

Component2.spec.ts

import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { getFunctions, provideFunctions } from '@angular/fire/functions';
import { getFirestore, provideFirestore, enableMultiTabIndexedDbPersistence } from '@angular/fire/firestore';
import { getDatabase, provideDatabase } from '@angular/fire/database';
import { getStorage, provideStorage } from '@angular/fire/storage';
import { getAuth, provideAuth } from '@angular/fire/auth';
import { environment } from 'src/environments/environment';

describe('Page', () => {

beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [Page],
      imports: [
        IonicModule.forRoot(),
        RouterModule.forRoot([]),
        FormsModule,
        RouterTestingModule,
        HttpClientTestingModule,
        provideFirebaseApp(() => initializeApp(environment.firebase)),
        provideAuth(() => getAuth()),
        provideFirestore(() => {
          const firestore = getFirestore();
          return firestore;
        }),
        provideDatabase(() => getDatabase()),
        provideStorage(() => getStorage()),
        provideFunctions(() => getFunctions()),
      ],
      providers: [],
      schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
    }).compileComponents();

    fixture = TestBed.createComponent(Page);
    router = TestBed.inject(Router); 
    component = fixture.componentInstance;
    // fixture.detectChanges();
  }));
Continue ...
})

then It gives me error NullInjectorError: No provider for FirebaseApps!

And As I get to know, becuase of multitple time initialization of firebase app, it throughing error.

How to initilize firebase in spec file of multiple components that all test cases will run at same time.

Expected behavior

Should Work well.

Actual behavior

Gives an error

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.