如何修复Angular中Signal条件块的Jest单元测试问题

问题分析 #

当前测试报错NG0203，是因为toObservable()仅能在Angular注入上下文（如构造函数、工厂函数等）中使用，且测试逻辑存在冗余：无需将Signal转为Observable验证视图更新，同时修改Signal值后未触发Angular变更检测，导致视图未同步更新。

组件代码（参考） #

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
  <p>i am app component!</p>
  
  @if (!isLoading()) {
    <div data-test="active-topic">qwerty</div>
  }
`,
  imports: [ChildComponent],
})
export class App {
  isLoading: Signal<boolean> = signal(true);
}

修复后的测试代码 #

it('should exist active-topic element', () => {
  // 修改Signal的值
  component.isLoading = signal(false);
  // 触发变更检测，让Angular更新视图
  fixture.detectChanges();

  // 查询目标元素
  const elements = fixture.debugElement.queryAll(
    By.css('[data-test="active-topic"]')
  );
  
  // 断言元素存在
  expect(elements.length).toBe(1);
});

修复说明 #

1. 移除toObservable()：测试场景下无需将Signal转为Observable，直接操作Signal并触发变更检测即可验证视图变化。
2. 触发变更检测：修改组件状态后，必须调用fixture.detectChanges()，Angular才会根据Signal新值更新模板中的@if条件渲染。
3. 直接断言：变更检测完成后，直接查询DOM元素并断言数量，即可验证目标元素是否渲染。

原错误信息：
NG0203: toObservable() can only be used within an injection context
such as a constructor, a factory function, a field initializer, or a
function used with runInInjectionContext.

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