Angular单元测试报错：.catch is not a function 问题求助

看起来你的组件在浏览器里跑没问题，但测试卡壳了——这种情况大多是因为测试环境和真实浏览器环境的异步处理、依赖mock的差异导致的。我帮你拆解下代码里的潜在问题和对应的修复方案：

可能的问题点&修复步骤 #

1. 混用Promise的catch而非RxJS的catchError #

你的loadAppointments()如果返回的是Promise，在switchMap里直接用.catch()是Promise的方法，真实环境里可能因为请求正常完成没触发错误，但测试时如果mock了错误场景，就会暴露问题。而且RxJS管道里更推荐用RxJS的catchError操作符来统一处理流的错误：

修复后的组件代码：

import { catchError, of } from 'rxjs/operators';
// ...
const request = this.queryQueue.pipe(
  switchMap(() => this.loadAppointments()),
  catchError(() => of([])) // 用RxJS的catchError返回空数组Observable
);
request.subscribe(newAppointments=> {
  this.appointments = this.myData.concat(newAppointments);
});

注意：要确保导入catchError和of操作符

2. 测试时未触发queryQueue的事件 #

queryQueue是Subject，只有调用queryQueue.next()时，switchMap里的逻辑才会执行。你的测试代码很可能忘了触发这个事件，导致订阅回调根本没跑。

测试里需要添加触发逻辑：

// 在测试准备就绪后，触发Subject的事件
component.queryQueue.next(null); // 这里因为switchMap没用到参数，传null即可

3. 未正确mockloadAppointments方法 #

测试时不能让代码真的发起网络请求，你需要mock这个方法，返回可控的Observable/Promise，还能模拟成功/失败场景：

// 模拟成功返回数据
spyOn(component, 'loadAppointments').and.returnValue(of(mockAppointments));
// 模拟请求失败场景
spyOn(component, 'loadAppointments').and.returnValue(throwError(() => new Error('test error')));

4. 异步订阅未等待完成 #

RxJS订阅是异步的，测试时如果直接断言this.appointments，可能回调还没执行完。你可以用Jasmine的fakeAsync+tick来处理异步逻辑：

示例测试代码：

it('should update appointments when queryQueue triggers', fakeAsync(() => {
  // 准备mock数据
  const mockAppointments = [{ id: 1 } as Appointment];
  component.myData = [{ id: 2 } as Appointment];
  spyOn(component, 'loadAppointments').and.returnValue(of(mockAppointments));

  // 触发queryQueue事件
  component.queryQueue.next(null);
  // 推进时间，让异步订阅回调执行
  tick();

  // 断言结果
  expect(component.appointments).toEqual([{ id: 2 }, { id: 1 }]);
}));

完整测试示例参考 #

import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { of, throwError, Subject } from 'rxjs';
import { YourComponent } from './your.component';
import { Appointment } from './appointment.model';

describe('YourComponent', () => {
  let component: YourComponent;
  let fixture: ComponentFixture<YourComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [YourComponent]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    // 初始化queryQueue（如果组件内未自动初始化）
    component.queryQueue = new Subject();
    component.myData = [];
    fixture.detectChanges();
  });

  it('should concatenate appointments on successful load', fakeAsync(() => {
    const mockAppointments = [{ id: 1, title: 'Test' } as Appointment];
    spyOn(component, 'loadAppointments').and.returnValue(of(mockAppointments));
    
    component.queryQueue.next(null);
    tick();
    
    expect(component.appointments).toEqual(mockAppointments);
    expect(component.loadAppointments).toHaveBeenCalled();
  }));

  it('should set empty appointments when load fails', fakeAsync(() => {
    spyOn(component, 'loadAppointments').and.returnValue(throwError(() => new Error('Failed')));
    
    component.queryQueue.next(null);
    tick();
    
    expect(component.appointments).toEqual([]);
  }));
});

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