Angular测试：组件computed signal未随服务signal更新

问题根源 #

你的组件HogeComponent在@Component的providers数组中声明了HogeService，这会导致每个组件实例都会创建一个独立的HogeService实例。而你在测试中通过TestBed.inject(HogeService)获取的是根注入器中的服务实例，和组件内部依赖注入的实例完全是两个对象。你修改根注入器里的服务实例的dataSrc，根本不会影响组件自己的服务实例，所以组件的numberHogeNames computed自然不会更新。

解决方案1：获取组件专属的服务实例 #

直接从组件的注入器中获取服务实例，确保你修改的是组件实际使用的那个：

// 修改测试代码的beforeEach部分
beforeEach(async () => {
  await TestBed.configureTestingModule({
    imports: [HogeComponent],
  }).compileComponents();

  fixture = TestBed.createComponent(HogeComponent);
  component = fixture.componentInstance;
  // 从组件的debugElement注入器获取服务，而不是根注入器
  hogeService = fixture.debugElement.injector.get(HogeService);
});

修改后重新运行测试，组件的numberHogeNames()会正确响应服务的变更，断言通过。

解决方案2：移除组件的专属服务实例 #

如果业务上不需要组件独占HogeService实例，可以删除组件@Component装饰器中的providers: [HogeService]配置，这样组件会从根注入器共享服务实例：

// 修改hoge-component.ts
@Component({
  standalone: true,
  // 移除这一行
  // providers: [HogeService],
  template: `<div class="num">{{ numberHogeNames() }}</div>`,
  encapsulation: ViewEncapsulation.Emulated,
  changeDetection: ChangeDetectionStrategy.OnPush,
  ...
})
export class HogeComponent {
  // 其余代码保持不变
}

此时测试代码无需修改，TestBed.inject(HogeService)获取的实例就是组件使用的，修改后组件的computed信号会正常更新。

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