在测试组件的创建时，使用 Firebase 进行角度测试失败，但应用程序运行正常（NullInjectionError）

Question

我正在使用 Angular 和 Firebase 开发一个聊天应用程序，它几乎完成了，一切似乎都工作正常......但测试给出了很多奇怪的错误。

例如，它说它无法创建某些组件，但事实是，当您运行应用程序时，它们会被创建并运行，没有问题。

据我调查，这可能是 Angular 和 Firebase 不同版本的问题，就像这里所说的那样

NullInjectorError：没有 InjectionToken angularfire2.app.options 的提供者！ 2021

我测试了那里所说的内容，但没有任何作用：

• 我尝试仅使用其中一个 API，但它不断抛出相同的错误，或者必须更改代码才能使其与其他 API 版本一起使用。我想到目前为止我都在使用这两个 API，因为较新的 API 是通过 Angular Fire 安装的，另一个是文档中解释的方式。在我测试之前没问题。

• 如果我尝试降级 Firebase 版本，很多代码将无法正常工作。

• 降级 Angular 会返回许多漏洞，我已经用这个 Angular 版本修复了这些漏洞。

这是我的

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 { }

这些是我在

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"
  }

可能是哪个问题？

我脑海中浮现的问题是，如果应用程序看起来运行良好（无论是在开发还是生产中），那么进行测试是否如此重要，如果它意味着许多实际上不会发生的奇怪问题在真实的应用程序上，或者更改可能导致应用程序本身崩溃的内容？投入时间值得吗？还是为了通过测试而改变看似不错的代码？

Answer 1

我成功解决了导入应用程序初始化方法的问题

AngularFireModule.initializeApp(environment.firebase),

在

chat.service.spec.ts

编辑：您还必须将其添加到出现此错误的组件的规范文件中

/*

  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);

   
  });

Answer 2

我在使用 @angular/fire 启动新的 Angular 15 项目时遇到了类似的问题。

我创建了一个仅使用 Authenticator 的服务并想测试它：

import { TestBed } from '@angular/core/testing';
import { AuthService } from './auth.service';
import { Auth } from '@angular/fire/auth';

describe('Service: Auth', () => {
  let service: AuthService;
  let auth: Auth;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [AuthService]
    });

    service = TestBed.inject(AuthService);
    auth = TestBed.inject(Auth);
  });

  it('should service does exists', () => {
    expect(service).toBeTruthy();
  });

  it('should service was correct injected', () => {
    expect(auth).toBeTruthy();
  });
});

运行时

ng test

我收到错误 NullInjectorError: R3InjectorError(DynamicTestModule)[AuthService -> Auth -> Auth]: NullInjectorError：没有身份验证提供者！

有效的方法是将必要的 Firebase 配置导入到测试模块中：

import { TestBed } from '@angular/core/testing';
import { AuthService } from './auth.service';
import { Auth, getAuth, provideAuth } from '@angular/fire/auth';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { environment } from 'src/environments/environment';

describe('Service: Auth', () => {
  let service: AuthService;
  let auth: Auth;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        provideFirebaseApp(() => initializeApp(environment.firebase)),
        provideAuth(() => getAuth())
      ],
      providers: [AuthService]
    });

    service = TestBed.inject(AuthService);
    auth = TestBed.inject(Auth);
  });

  it('should service does exists', () => {
    expect(service).toBeTruthy();
  });

  it('should service was correct injected', () => {
    expect(auth).toBeTruthy();
  });
});