Angular17用Jasmine/Karma测试Firestore服务时AngularFireModule未提供错误

1. 检查测试模块的AngularFire提供器配置 #

测试环境与AppModule完全独立，必须在测试模块中完整初始化Firebase App和Firestore提供器，不能依赖AppModule的配置。示例代码：

import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';
import { TestBed } from '@angular/core/testing';
import { FirestoreDataService } from './firestore-data.service';

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      providers: [
        // 用测试专用的Firebase配置，可使用模拟器或测试项目配置
        provideFirebaseApp(() => initializeApp({
          apiKey: 'test-key',
          authDomain: 'test-project.firebaseapp.com',
          projectId: 'test-project',
          storageBucket: 'test-project.appspot.com',
          messagingSenderId: '123456',
          appId: '1:123456:web:abc123'
        })),
        provideFirestore(() => getFirestore())
      ]
    }).compileComponents();

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

  // 编写测试用例
  it('should fetch document successfully', (done) => {
    service.fetchDoc('test-collection', 'doc-id').subscribe({
      next: (doc) => {
        expect(doc).toBeTruthy();
        done();
      },
      error: (err) => fail(err)
    });
  });
});

2. 优先使用模拟对象隔离测试 #

如果不需要调用真实Firestore服务，直接模拟AngularFireFirestore及其方法，完全避免Firebase初始化流程，从根源解决错误：

import { TestBed } from '@angular/core/testing';
import { FirestoreDataService } from './firestore-data.service';
import { AngularFireFirestore } from '@angular/fire/firestore';

describe('FirestoreDataService', () => {
  let service: FirestoreDataService;
  let mockFirestore: jasmine.SpyObj<AngularFireFirestore>;

  beforeEach(() => {
    // 创建AngularFireFirestore的模拟对象
    mockFirestore = jasmine.createSpyObj('AngularFireFirestore', ['doc', 'collection']);
    
    // 模拟文档查询的返回值
    const mockDocRef = jasmine.createSpyObj('DocumentReference', ['get']);
    mockDocRef.get.and.returnValue(Promise.resolve({
      exists: true,
      data: () => ({ name: 'test-data' })
    }));
    mockFirestore.doc.and.returnValue(mockDocRef);

    TestBed.configureTestingModule({
      providers: [
        FirestoreDataService,
        { provide: AngularFireFirestore, useValue: mockFirestore }
      ]
    });

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

  it('should return document data when fetchDoc is called', (done) => {
    service.fetchDoc('test-collection', '1').subscribe({
      next: (data) => {
        expect(data).toEqual({ name: 'test-data' });
        expect(mockFirestore.doc).toHaveBeenCalledWith('test-collection/1');
        done();
      }
    });
  });

  // 模拟错误场景
  it('should handle fetchDoc error', (done) => {
    const mockError = new Error('Document not found');
    const mockDocRef = jasmine.createSpyObj('DocumentReference', ['get']);
    mockDocRef.get.and.returnValue(Promise.reject(mockError));
    mockFirestore.doc.and.returnValue(mockDocRef);

    service.fetchDoc('test-collection', 'invalid-id').subscribe({
      error: (err) => {
        expect(err).toEqual(mockError);
        done();
      }
    });
  });
});

3. 验证AngularFire版本兼容性 #

Angular 17要求AngularFire版本≥7.6.0，版本不匹配会导致初始化逻辑异常。执行以下命令确认并升级：

npm list @angular/fire
npm install @angular/fire@latest

4. 配置Firestore模拟器（可选） #

如果需要测试真实Firestore逻辑但不想使用生产环境，配置本地模拟器：

import { connectFirestoreEmulator } from '@angular/fire/firestore';

// 在provideFirestore中添加模拟器连接
provideFirestore(() => {
  const firestore = getFirestore();
  connectFirestoreEmulator(firestore, 'localhost', 8080);
  return firestore;
})

启动模拟器前需确保已安装Firebase CLI并初始化项目：firebase init emulators

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