Angular单元测试：Spy对象未正确调用API服务方法问题排查

我编写了Angular组件、测试用例及服务代码，尝试测试基于id调用API接口返回字符串的服务方法。传入指定employerId后，预期返回“Enrollment Employer”并赋值给employerName，但测试始终报错“Expected undefined to be 'Enrollment Employer'”。调试时可见正确的employerId传入getEmployerName()，但未收到响应，请问我的测试编写是否正确？

测试代码（Spec） #

beforeEach(() => {
  fixture = TestBed.createComponent(EnrollmentComponent);
  component = fixture.componentInstance;
  debugElement = fixture.debugElement;

  employerService = debugElement.injector.get(EmployerService);
  employerSpy = spyOn(employerService, 'getEmployerName').and.callThrough();

  fixture.detectChanges();
});


it('should call the employer service and return the employer name', () => {
  component.employerId = 12485;
  component.getEmployerName();
  expect(employerSpy).toHaveBeenCalled();
  expect(component.employerName).toBe('Enrollment Employer');
})

组件代码（Component） #

getEmployerName() {
  this.employerService.getEmployerName(this.employerId).subscribe(res => {
    this.employerName = res.empName;
  });
}

服务代码（Service） #

getEmployerName(employerId: number) {
  const url = `${this.url}getEmployerName?employerId=${employerId}`
  return this.apiService.request<any>({ url, method: HttpReqMethod.GET })
}

核心问题分析 #

你的测试编写存在两个关键问题：

1. 未处理异步操作：getEmployerName依赖HTTP请求，属于异步操作，测试代码同步断言employerName时，订阅回调还未执行，因此值为undefined。
2. 未模拟服务响应：使用and.callThrough()会触发真实API请求，测试环境中通常无法获取预期响应，且不符合单元测试隔离依赖的原则。

修正后的测试代码 #

import { of } from 'rxjs';
import { fakeAsync, tick } from '@angular/core/testing';

beforeEach(() => {
  fixture = TestBed.createComponent(EnrollmentComponent);
  component = fixture.componentInstance;
  debugElement = fixture.debugElement;

  employerService = debugElement.injector.get(EmployerService);
  // 模拟服务返回预期数据，替代真实API调用
  employerSpy = spyOn(employerService, 'getEmployerName').and.returnValue(
    of({ empName: 'Enrollment Employer' })
  );

  fixture.detectChanges();
});


it('should call the employer service and return the employer name', fakeAsync(() => {
  component.employerId = 12485;
  component.getEmployerName();
  
  // 等待异步回调执行完毕
  tick();
  // 更新组件视图（若需断言DOM内容则添加）
  fixture.detectChanges();

  expect(employerSpy).toHaveBeenCalledWith(12485); // 验证参数传递正确
  expect(component.employerName).toBe('Enrollment Employer');
}))

关键修改说明 #

• 模拟服务返回：用and.returnValue(of(...))创建包含预期数据的Observable，避免真实网络请求，确保测试可控。
• 异步流程控制：使用fakeAsync和tick()同步等待Observable回调执行，保证断言时employerName已被正确赋值。
• 增强断言严谨性：添加toHaveBeenCalledWith(12485)验证服务方法接收的参数正确，覆盖更多测试场景。

可选异步处理方式（async/await） #

也可以用async/await结合fixture.whenStable()实现：

it('should call the employer service and return the employer name', async () => {
  component.employerId = 12485;
  component.getEmployerName();
  
  await fixture.whenStable();
  fixture.detectChanges();

  expect(employerSpy).toHaveBeenCalledWith(12485);
  expect(component.employerName).toBe('Enrollment Employer');
})

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