Angular单元测试Meta服务时app-id为undefined如何解决

问题由两个核心错误导致：

• 执行时序错误：Angular测试流程中，首次调用fixture.detectChanges()时会自动触发组件的ngOnInit生命周期。现有代码在公共beforeEach块中就调用了fixture.detectChanges()，但测试用例里是在这一步执行完成后才给regionServiceSpy.selectedRegion赋值为FR，ngOnInit执行时selectedRegion还处于未赋值的undefined状态。
• Spy桩缺失逻辑：通过jasmine.createSpyObj创建的服务mock对象，所有声明的spy方法默认返回undefined，不会执行原服务的业务逻辑。代码中虽然声明了getAppId、retrieveABCRegions、retrieveDEFRegions三个spy方法，但没有给它们配置返回规则，getAppId()调用后直接返回undefined。

按以下步骤调整测试代码即可：

• 移除公共beforeEach块中的fixture.detectChanges()调用，把生命周期触发动作放到每个测试用例内部，等所有前置测试数据配置完成后再执行。
• 给RegionService的spy方法配置符合测试场景的返回规则：如果是组件单元测试，不需要关心RegionService内部的判断逻辑，直接给getAppId指定对应场景的返回值即可；如果要复用原服务的判断逻辑，需要同时给retrieveABCRegions、retrieveDEFRegions配置返回值，再通过callFake让getAppId执行模拟的判断逻辑。

// 修正后的beforeEach块
beforeEach(() => {
  fixture = TestBed.createComponent(MyComponent);
  component = fixture.componentInstance;
  // 移除原有的fixture.detectChanges()调用
});

it('should set app-id to 0123456789 if selectedRegion is FR', () => {
  // 前置配置
  // 方式1：直接指定getAppId返回值（组件单元测试推荐，无需依赖RegionService内部逻辑）
  regionServiceSpy.selectedRegion = 'FR';
  regionServiceSpy.getAppId.and.returnValue('0123456789');

  // 方式2：如果要模拟RegionService内部判断逻辑，用以下配置替代方式1
  // regionServiceSpy.retrieveABCRegions.and.returnValue(['US', 'CA']);
  // regionServiceSpy.retrieveDEFRegions.and.returnValue(['FR', 'DE']);
  // regionServiceSpy.getAppId.and.callFake(() => {
  //   if (regionServiceSpy.retrieveABCRegions().includes(regionServiceSpy.selectedRegion)) {
  //     return '111111111'; 
  //   } else if (regionServiceSpy.retrieveDEFRegions().includes(regionServiceSpy.selectedRegion)) {
  //     return '0123456789';
  //   }
  // });
  // regionServiceSpy.selectedRegion = 'FR';

  // 所有配置完成后再触发变更检测，执行ngOnInit
  fixture.detectChanges();

  // 断言
  expect(metaServiceSpy.updateTag).toHaveBeenCalledWith({
    name: 'apple-itunes-app', 
    content: 'app-id=0123456789'
  });
});

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