Angular组件ngOnInit中服务响应单元测试报错求助

错误原因 #

你遇到的错误是因为直接在ShoeService类上使用spyOn，但spyOn的正确用法是监听注入到组件的服务实例的方法，而非类本身。

修正后的测试代码 #

it('should assign shoe data when details are defined', waitForAsync(() => { 
  const mockShoeData = [
    {
      mCompanyIDEntity: {
        mbranchID: '108020',
        misShippingItem: true,
        mIsBranchNumber: false,
      },
      companyName: 'SOME COMPANY',
      shoeBalance: 1250.00,
      orderDate: '',
      mAccountHolder: false,
    },
  ];

  // 获取注入的服务实例
  const shoeService = TestBed.inject(ShoeService);
  // 对实例的方法创建间谍，返回模拟的Observable数据
  spyOn(shoeService, 'getShoeData').and.returnValue(of(mockShoeData));

  component.ngOnInit();
  // 触发变更检测，确保订阅回调执行
  fixture.detectChanges();

  // 断言组件的shoeDataResponse被正确赋值
  expect(component.shoeDataResponse).toEqual(mockShoeData);
  // 验证服务方法被调用过一次
  expect(shoeService.getShoeData).toHaveBeenCalled();
}));

关键调整点 #

• 获取服务实例：通过TestBed.inject(ShoeService)获取测试环境中注入的服务实例，而非直接操作类。
• 添加变更检测：调用fixture.detectChanges()确保Observable的订阅回调被执行（Angular测试中需手动触发变更检测处理异步操作）。
• 正确断言：替换无意义的expect(component).toBeTruthy()，改为针对shoeDataResponse的有效性断言，同时验证服务方法的调用情况，确保测试逻辑精准。
• 变量命名优化：将模拟数据变量改为mockShoeData，避免与组件自身的shoeDataResponse变量混淆。

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