angular - NullInjectorError：在 ng 测试时没有 InjectionToken angularfire2.app.options 的提供者

Question

我正在使用karma和jasmine作为我的主要框架进行自动化测试。但是每当我ng test在 cli 上运行时，它总是返回相同的错误。

错误：

NullInjectorError：R3InjectorError（DynamicTestModule）[AngularFireAuth -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]：NullInjectorError：没有 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();
  });
});

标签： angulartypescriptfirebase

Answer 1

您必须在测试中添加组件使用的所有导入、声明和提供程序。

在这种情况下，我们将注入真实数据，但如果您可以模拟 AngularFirebase 会更好。（搜索如何在测试中模拟 AngularFire）

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