如何Mock Angular服务实现多测试场景不同返回？含错误场景改造

我来帮你搞定这两个单元测试的问题，咱们一步步拆解：

1. 如何Mock Angular服务以在不同测试中返回不同结果？ #

原来的MockService是固定返回空数组，灵活性不足。要在不同测试里返回不同结果，推荐用Jasmine的spyOn来动态替换服务方法的实现，不用修改MockService的基础结构，每个测试都能自定义返回值：

• 在beforeEach初始化组件和服务后，对service.getResults创建一个spy。
• 每个测试用例里，通过and.returnValue()指定当前测试要返回的Observable（成功数据或者错误）。

这种方式能快速切换服务的返回逻辑，不用写多个冗余的Mock类。

2. 修改代码添加错误场景的测试 #

首先要注意：你的组件里需要初始化loading = true，不然初始状态就是false，测试没法验证"加载结束后变为false"的逻辑。先给组件加一行：

loading = true; // 在ResultListComponent类中添加

然后修改测试代码，添加第二个测试用例，让getResults抛出错误。这里要用到RxJS的throwError（RxJS 6+版本适用，旧版本用Observable.throw）。

修改后的完整测试代码： #

import { throwError, of } from 'rxjs';
import { ResultListComponent } from './result-list.component';
import { Service1 } from './service1.service';
import { Result } from './result.model';

class MockService {
  getResults(): Observable<Result[]> {
    return of([]); // 默认返回空数组
  }
}

describe('Component: ResultList', () => {
  let resultList: ResultListComponent;
  let service: MockService;

  beforeEach(() => {
    service = new MockService();
    resultList = new ResultListComponent(service as unknown as Service1);
    // 确保初始loading为true（如果组件未初始化，这里手动设置）
    resultList.loading = true;
  });

  it('should set loading to false when loadResults succeeds', () => {
    // 自定义成功返回的测试数据
    spyOn(service, 'getResults').and.returnValue(of([{ id: 1, name: 'Test Result' }]));
    
    resultList.ngOnInit();
    expect(resultList.loading).toBeFalsy();
    expect(resultList.results.length).toBe(1); // 额外验证结果是否被正确赋值
  });

  it('should set loading to false when loadResults throws an error', () => {
    // 让getResults抛出HTTP错误
    spyOn(service, 'getResults').and.returnValue(throwError(() => new Error('HTTP 500')));
    
    resultList.loadResults(); // 直接调用方法，或通过ngOnInit触发
    expect(resultList.loading).toBeFalsy();
  });
});

代码解释： #

• 第一个测试：用spyOn替换getResults，返回包含测试数据的Observable，验证加载成功后loading变为false，同时验证results被正确赋值。
• 第二个测试：让getResults返回throwError创建的错误Observable，调用loadResults后，验证loading依然被设为false。

如果你的项目用Angular的TestBed来配置测试（更贴近真实依赖注入场景），也可以用类似思路配置可动态修改的Mock服务，不过上面的方式更轻量，适合简单组件的单元测试。

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