如何解决Angular服务单元测试中响应Undefined的问题

问题核心原因 #

你的测试代码存在两个致命矛盾：

1. 服务实例被重复覆盖：先通过jasmine.createSpyObj创建了间谍对象赋值给service，但后续又用TestBed.inject(MyService)获取真实服务实例覆盖了它，导致之前的间谍配置完全无效。
2. spyOn使用逻辑错误：当你尝试用spyOn时，要么没有针对正确的服务实例设置，要么没有让getData返回一个有效的Observable，导致service.getData()返回undefined，调用.subscribe()时自然报错。

两种正确的测试实现方案 #

方案1：验证真实服务的HTTP请求逻辑 #

如果你需要测试服务的HTTP请求细节（比如URL、请求方法是否符合预期），保留HttpClientTestingModule，移除多余的间谍对象创建：

describe('MyTest', () => {
  let service: MyService;
  let httpTestingController: HttpTestingController;
  const mockedData = { id: 1, name: 'test' }; // 你的模拟数据
  const expectedRequestUrl = '/api/data'; // 预期的请求URL

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [MyService]
    });

    service = TestBed.inject(MyService);
    httpTestingController = TestBed.inject(HttpTestingController);
  });

  it('Should return expected Data', () => {
    service.getData().subscribe((res) => {
      expect(res).toEqual(mockedData);
    });

    // 捕获并验证请求
    const req = httpTestingController.expectOne(expectedRequestUrl);
    expect(req.request.method).toBe('GET');
    // 返回模拟数据
    req.flush(mockedData);
    // 确保所有请求都被处理，没有遗漏
    httpTestingController.verify();
  });
});

方案2：用间谍对象隔离测试服务逻辑 #

如果你只需要验证getData的调用逻辑，不需要真实HTTP请求，直接用间谍对象模拟服务行为：

import { of } from 'rxjs';

describe('MyTest', () => {
  let service: jasmine.SpyObj<MyService>;
  const mockedData = { id: 1, name: 'test' };

  beforeEach(() => {
    // 创建间谍对象并定义要模拟的方法
    service = jasmine.createSpyObj('MyService', ['getData']);
    // 让getData返回包装了模拟数据的Observable
    service.getData.and.returnValue(of(mockedData));

    TestBed.configureTestingModule({
      providers: [{ provide: MyService, useValue: service }]
    });
  });

  it('Should return expected Data', () => {
    service.getData().subscribe((res) => {
      expect(res).toEqual(mockedData);
    });

    // 验证getData方法被调用过
    expect(service.getData).toHaveBeenCalled();
  });
});

关键注意点 #

• 不要同时混合真实服务实例和间谍对象，根据测试目标二选一
• 使用spyOn时，必须确保returnValue返回的是Observable类型（用rxjs的of()包装数据），不能直接返回普通对象或原始值
• 使用HttpClientTestingController时，务必调用verify()，避免遗漏未处理的HTTP请求

内容的提问来源于stack exchange，提问作者k.vincent