Angular 8 Karma测试：如何覆盖Observable服务调用的成功与错误分支

这个场景我太熟悉了！Jasmine不允许你重复对同一个方法创建spy，所以直接第二次调用spyOn肯定会报错。这里有两种靠谱的解决方式，看你需求选：

方法一：拆分到独立的测试用例（推荐） #

最规范的做法是把成功分支和错误分支的测试放到两个独立的it块里。因为Jasmine会在每个it执行完后自动重置所有spy和测试状态，这样每个测试只专注一个场景，逻辑清晰还不会互相干扰：

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;
  let myService: MyService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [MyComponent],
      providers: [MyService]
    });
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    myService = TestBed.inject(MyService);
  });

  it('should process data successfully when getMyData returns correctly', () => {
    // 准备成功返回的mock数据
    const mockObject = { id: 1, name: 'Test Data' };
    // 设置spy返回成功的Observable
    spyOn(myService, 'getMyData').and.returnValue(of(mockObject));

    // 触发组件初始化（ngOnInit）
    fixture.detectChanges();

    // 这里添加成功逻辑的断言，比如检查组件是否正确处理了返回数据
    expect(component.processedData).toEqual(mockObject);
  });

  it('should handle error properly when getMyData fails', () => {
    const testError = new Error('Failed to fetch data');
    // 设置spy返回错误的Observable
    spyOn(myService, 'getMyData').and.returnValue(throwError(() => testError));

    // 触发组件初始化
    fixture.detectChanges();

    // 添加错误逻辑的断言，比如检查组件是否捕获了错误并显示对应信息
    expect(component.errorMessage).toBe('Failed to fetch data');
  });
});

方法二：在同一个测试用例中重置spy（不推荐，除非特殊需求） #

如果非要在同一个it里测试两个分支，可以先保存spy的引用，然后通过重置调用记录并重新设置返回值来实现。不过这种方式容易导致测试状态混乱，尽量少用：

it('should handle both success and error scenarios', () => {
  const mockObject = { id: 1, name: 'Test Data' };
  const testError = new Error('Failed to fetch data');

  // 先测试成功分支
  const mySpy = spyOn(myService, 'getMyData').and.returnValue(of(mockObject));
  fixture.detectChanges();
  expect(component.processedData).toEqual(mockObject);

  // 重置spy的调用记录，并重新设置为返回错误
  mySpy.calls.reset();
  mySpy.and.returnValue(throwError(() => testError));

  // 重新触发ngOnInit，注意这里可能需要先重置组件的状态（比如清空之前的processedData）
  component.processedData = null;
  component.errorMessage = '';
  component.ngOnInit();

  // 断言错误逻辑
  expect(component.errorMessage).toBe('Failed to fetch data');
});

另外要注意：RxJS 6及以上版本中，throwError推荐传入一个工厂函数（throwError(() => new Error(...))），而不是直接传入Error实例，这样能避免一些意外的状态问题。

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