Angular测试中注入FirebaseApp提示No provider for FirebaseApp问题

我之前也碰到过一模一样的问题！在测试依赖AngularFire的组件时，直接注入FirebaseApp确实容易踩这个坑，下面给你两个可行的解决办法，你可以根据测试场景选一个：

方法一：导入并初始化AngularFire测试模块 #

AngularFire的核心服务（包括FirebaseApp）需要通过AngularFireModule.initializeApp()来注册provider，哪怕是测试环境，你只需要提供一个测试用的Firebase配置就行，不需要连接真实的Firebase项目：

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
      // 初始化测试用的AngularFire模块
      AngularFireModule.initializeApp({
        apiKey: "test-api-key",
        authDomain: "test-project.firebaseapp.com",
        projectId: "test-project-id"
      }),
      // 如果你的组件还用到了其他AngularFire子模块（比如Auth、Firestore），也要一并导入
      AngularFireAuthModule
    ],
    declarations: [YourComponent]
  }).compileComponents();
}));

这种方法适合集成测试，需要保留AngularFire的真实逻辑，或者组件依赖的Firebase功能比较复杂的场景。

方法二：提供Mock版的FirebaseApp #

如果只是做单元测试，想完全隔离Firebase的依赖，你可以创建一个模拟的FirebaseApp对象，只实现组件用到的方法/属性，然后把它作为provider注入：

// 先定义符合组件需求的mock对象
const mockFirebaseApp = {
  // 比如你的组件用到了auth服务，就模拟这个方法
  auth: jasmine.createSpy('auth').and.returnValue({
    // 继续模拟auth里你用到的具体方法，比如signInWithEmailAndPassword
    signInWithEmailAndPassword: jasmine.createSpy('signInWithEmailAndPassword')
  })
};

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [YourComponent],
    providers: [
      // 把mock对象作为FirebaseApp的provider
      { provide: FirebaseApp, useValue: mockFirebaseApp }
    ]
  }).compileComponents();
}));

这种方法的好处是完全控制Firebase服务的行为，专注于测试组件本身的逻辑，不受外部服务影响。

额外提醒 #

如果你的组件还依赖其他AngularFire服务（比如AngularFirestore、AngularFireStorage），记得要么导入对应的模块，要么同样提供mock版本的provider，才能避免类似的"No provider"错误。

内容的提问来源于stack exchange，提问作者ezeikel