Angular测试：Mock与订阅设置问题及报错排查

错误含义解释 #

1. TypeError: Cannot read properties of undefined (reading 'subscribe') #

这个错误表示你在代码中尝试调用某个对象的subscribe()方法，但该对象是undefined。在Angular组件测试场景下，通常是组件依赖的服务方法没有被正确模拟，导致调用该方法后返回的不是Observable，而是undefined，自然无法执行subscribe操作。

2. Error: <toHaveBeenCalled> : Expected a spy, but got Function. #

toHaveBeenCalled是Jasmine框架中用于断言**间谍函数（Spy）**是否被调用的方法，这个错误说明你把普通函数当成了间谍函数来做断言。只有通过spyOn或jasmine.createSpyObj等方式创建的间谍函数，才能使用这个断言方法。

常见遗漏内容分析 #

结合Angular测试的常规流程，你可能遗漏了以下操作：

针对第一个错误的常见遗漏 #

• 未正确模拟服务方法的返回值：你可能只创建了服务的mock对象，但没有让被调用的服务方法返回Observable。比如组件中调用dataService.getData()，mock时需要用of()（RxJS工具函数）返回模拟数据，确保方法返回的是Observable类型。
• 未将mock服务注入测试模块：测试时没有把模拟的服务实例替换掉真实服务，导致组件拿到的是未初始化的真实服务，或者服务实例为undefined，调用方法自然返回undefined。
• 未触发组件生命周期钩子：如果服务方法是在ngOnInit等钩子中调用的，测试时没有手动调用component.ngOnInit()，不过这种情况较少见，更多还是mock服务的问题。

针对第二个错误的常见遗漏 #

• 未创建间谍函数：你要断言的服务方法没有被设置为间谍函数，直接用原始函数进行toHaveBeenCalled断言。必须先通过spyOn(服务实例, '方法名')或jasmine.createSpyObj创建包含间谍方法的mock服务。
• 间谍函数被覆盖：测试过程中重新赋值了服务的方法，导致原本创建的间谍函数被普通函数替换，断言时自然识别不到间谍对象。

示例修正代码 #

模拟服务并返回Observable（解决第一个错误） #

import { of } from 'rxjs';
import { DataService } from './data.service';

describe('YourComponent', () => {
  let component: YourComponent;
  let mockDataService: jasmine.SpyObj<DataService>;

  beforeEach(async () => {
    // 创建带间谍方法的mock服务
    mockDataService = jasmine.createSpyObj('DataService', ['getData']);
    // 让间谍方法返回Observable
    mockDataService.getData.and.returnValue(of({ id: 1, name: 'test' }));

    await TestBed.configureTestingModule({
      declarations: [YourComponent],
      providers: [
        { provide: DataService, useValue: mockDataService } // 注入mock服务
      ]
    }).compileComponents();
  });

  beforeEach(() => {
    component = TestBed.createComponent(YourComponent).componentInstance;
  });

  it('should subscribe to data service', () => {
    component.ngOnInit();
    // 此时调用getData会返回Observable，不会出现subscribe的undefined错误
  });
});

正确使用间谍函数断言（解决第二个错误） #

it('should call getData method on init', () => {
  component.ngOnInit();
  // 断言间谍方法被调用，必须用mock的间谍对象
  expect(mockDataService.getData).toHaveBeenCalled();
});

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