NullInjectorError: No provider for InjectionToken angularfire2.app.options while ng test

Viewed 1088

I'm doing an automated test using karma and jasmine as my primary frameworks for it. But whenever I run ng test on the cli, it always returns the same error.

The Error:

NullInjectorError: R3InjectorError(DynamicTestModule)[AngularFireAuth -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]: NullInjectorError: No provider for InjectionToken angularfire2.app.options!

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from "@angular/fire";
import { AngularFirestoreModule } from "@angular/fire/firestore";
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireStorageModule } from '@angular/fire/storage';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DashboardComponent } from '../app/dashboard-components/dashboard/dashboard.component'
import { LoginComponent } from './auth-components/login/login.component';
import { PagenotfoundComponent } from './pagenotfound/pagenotfound.component';
import { ForgotPasswordComponent } from './auth-components/forgot-password/forgot-password.component';
import { environment } from "src/environments/environment";
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { NavbarComponent } from './navbar/navbar.component';
import { MyProfileComponent } from './my-profile-components/my-profile/my-profile.component';
import { UserManagementComponent } from './user-management-components/user-management/user-management.component';
import { NgxPaginationModule } from 'ngx-pagination'; // <-- import the module
import { AngularFireFunctionsModule } from '@angular/fire/functions';
import { HttpClientModule } from '@angular/common/http';
import { UserComponent } from './user-management-components/user/user.component';
import { TaskComponent } from './dashboard-components/task/task.component';
import { TaskSettingsComponent } from './dashboard-components/task-settings/task-settings.component';
import { ReportComponent } from './dashboard-components/report/report.component';
import { ChartModule } from 'angular2-chartjs';
import { DownloadReportComponent } from './dashboard-components/download-report/download-report.component';
import { Ng2SearchPipeModule } from 'ng2-search-filter';
import { VerifyTaskComponent } from './user-management-components/verify-task/verify-task.component';

import { UserManualComponent } from './user-manual/user-manual.component';
import { ArchiveComponent } from './archive/archive.component';
import { AngularFireDatabaseModule } from '@angular/fire/database';
@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    LoginComponent,
    PagenotfoundComponent,
    ForgotPasswordComponent,
    NavbarComponent,
    MyProfileComponent,
    UserManagementComponent,
    UserComponent,
    TaskComponent,
    TaskSettingsComponent,
    ReportComponent,
    DownloadReportComponent,
    VerifyTaskComponent,
    UserManualComponent,
    ArchiveComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ChartModule,
    AngularFireAuthModule,
    ReactiveFormsModule,
    NgxPaginationModule,
    AngularFirestoreModule, //Firebase imports
    AngularFireFunctionsModule,
    AngularFireStorageModule,
    Ng2SearchPipeModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

archive.component.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';

import { ArchiveComponent } from './archive.component';

describe('ArchiveComponent', () => {
  let component: ArchiveComponent;
  let fixture: ComponentFixture<ArchiveComponent>;

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

  beforeEach(() => {
    fixture = TestBed.createComponent(ArchiveComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});
1 Answers

You have to add on the test, all the imports, declarations and providers that your component use.

In this case, we are going to inject the real data, but it's better if you could mock the AngularFirebase. (Search how to mock AngularFire on test)

 TestBed.configureTestingModule({
          declarations: [ ArchiveComponent ],
          imports: [ RouterTestingModule, AngularFireModule.initializeApp(environment.firebase), AngularFireDatabaseModule ]
        })
Related