如何用Jasmine测试依赖AngularFire的Angular服务？解决初始化报错

核心问题分析 #

你遇到的报错本质是：测试环境中Firebase App未完成初始化，或是你的LocationService直接调用了Firebase原生API（未通过AngularFire封装层），导致无法识别AngularFire初始化的App实例。以下是两种可行的解决方案，按需选择：

方案一：使用Firebase模拟器进行集成测试（依赖真实测试环境） #

适合需要验证真实Firebase交互逻辑的场景，步骤如下：

1. 先启动Firebase模拟器（需提前安装firebase-tools）

firebase emulators:start --only database

2. 在测试代码中正确配置AngularFire提供者，绑定到模拟器：

import { TestBed } from '@angular/core/testing';
import { LocationService } from './location.service';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideDatabase, getDatabase } from '@angular/fire/database';
import { connectDatabaseEmulator } from 'firebase/database';

describe('LocationService', () => {
  let service: LocationService;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      providers: [
        // 初始化测试用Firebase App
        provideFirebaseApp(() => initializeApp({
          apiKey: 'test-key',
          authDomain: 'test-project.firebaseapp.com',
          databaseURL: 'http://localhost:9000?ns=test-project',
          projectId: 'test-project',
        })),
        // 绑定到Database模拟器
        provideDatabase(() => {
          const db = getDatabase();
          connectDatabaseEmulator(db, 'localhost', 9000);
          return db;
        })
      ]
    }).compileComponents();

    service = TestBed.inject(LocationService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

  // 编写验证数据库交互的测试用例
});

方案二：完全Mock AngularFire服务（纯单元测试，推荐） #

单元测试应隔离外部依赖，直接Mock AngularFire的封装服务，而非Firebase原生模块：

示例（假设你的Service依赖AngularFireDatabase） #

import { TestBed } from '@angular/core/testing';
import { LocationService } from './location.service';
import { AngularFireDatabase } from '@angular/fire/compat/database';
import { of } from 'rxjs';

// 构造符合Service调用逻辑的Mock对象
const mockAngularFireDatabase = {
  list: jasmine.createSpy('list').and.returnValue({
    valueChanges: jasmine.createSpy('valueChanges').and.returnValue(of([]))
  }),
  object: jasmine.createSpy('object').and.returnValue({
    valueChanges: jasmine.createSpy('valueChanges').and.returnValue(of({ lat: 39.9, lng: 116.4 }))
  })
};

describe('LocationService', () => {
  let service: LocationService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        LocationService,
        // 用Mock对象替换真实的AngularFireDatabase
        { provide: AngularFireDatabase, useValue: mockAngularFireDatabase }
      ]
    });

    service = TestBed.inject(LocationService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

  it('should fetch location list correctly', (done) => {
    service.getLocations().subscribe(locations => {
      expect(locations).toEqual([]);
      // 验证是否调用了预期的数据库路径
      expect(mockAngularFireDatabase.list).toHaveBeenCalledWith('/user-locations');
      done();
    });
  });
});

常见错误排查 #

1. 直接调用Firebase原生API：如果你的LocationService中写了firebase.database()这类代码，即使通过AngularFire初始化了App，原生API也无法识别。建议修改Service，改用AngularFire提供的封装服务（如AngularFireDatabase、getDatabase()）。
2. 测试配置遗漏：确保TestBed.configureTestingModule的providers数组中，正确添加了provideFirebaseApp和对应Firebase服务的提供者（如provideDatabase）。

内容的提问来源于stack exchange，提问作者Paweł Sosnowski