Angular Jest单元测试中*ngIf控制的li标签始终不可见问题排查

核心报错原因 #

• 组件未挂载到测试DOM树：TestBed创建的组件默认仅存在于内存中，不会自动追加到jsdom的document节点下。@testing-library/jest-dom提供的toBeVisible()匹配器会校验元素是否在实际渲染树中，脱离文档流的元素会被直接判定为不可见，这是当前报错的最核心诱因。
• 元素引用缓存失效：如果Page类在初始化阶段（通常是beforeEach第一次变更检测前）就查询并缓存了tab元素的引用，后续*ngIf触发元素销毁、重建时，持有的始终是旧的、已从DOM中移除的元素引用，断言时自然会返回不可见结果。另外使用全局document.querySelector查询还可能拿到其他用例残留的同名元素，干扰断言结果。
• 生命周期逻辑覆盖测试值：ngOnInit中读取feature flag赋值的逻辑如果没有被mock，第一次触发fixture.detectChanges()时，初始化逻辑可能把手动设置的isTabEnabled值覆盖，导致元素状态和预期不符。
• 断言逻辑和*ngIf行为不匹配：*ngIf为false时会直接把元素从DOM树中移除，而非通过CSS样式隐藏，这时候用not.toBeVisible()断言本身就不符合框架行为，容易出现误判。

可直接落地的修复方案 #

1. 补充测试DOM挂载与清理逻辑
   在beforeEach创建组件实例后，将组件原生元素追加到document.body中，每个用例执行完成后移除元素，避免跨用例污染：

let fixture: ComponentFixture<YourComponent>;
let component: YourComponent;

beforeEach(waitForAsync(() => {
  TestBed.configureTestingModule({
    declarations: [YourComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    // mock feature flag服务，固定返回测试需要的值，避免初始化逻辑干扰
    providers: [
      {
        provide: FeatureFlagService,
        useValue: { getFlag: () => of(false) }
      }
    ]
  }).compileComponents();
}));

beforeEach(() => {
  fixture = TestBed.createComponent(YourComponent);
  component = fixture.componentInstance;
  // 挂载组件到测试DOM
  document.body.appendChild(fixture.nativeElement);
  // 触发首次变更检测，走完初始化生命周期
  fixture.detectChanges();
});

afterEach(() => {
  // 清理DOM避免跨用例污染
  fixture.nativeElement.remove();
});

2. 调整Page类的元素查询逻辑
   不要缓存元素引用，每次获取元素时都从当前组件的根节点下动态查询，避免拿到失效引用：

class ComponentPage {
  constructor(private fixture: ComponentFixture<YourComponent>) {}

  get tabItem(): HTMLElement | null {
    // 限定查询范围为当前组件内部，不使用全局document查询
    return this.fixture.nativeElement.querySelector('[js-selector="tab"]');
  }
}

3. 修正测试用例的断言逻辑
   匹配*ngIf的实际行为，元素隐藏时直接断言不存在，元素显示时再校验可见性：

it('should render tab when isTabEnabled set to true', () => {
  component.isTabEnabled = true;
  fixture.detectChanges();
  const page = new ComponentPage(fixture);
  expect(page.tabItem).toBeVisible();
});

it('should remove tab from DOM when isTabEnabled set to false', () => {
  component.isTabEnabled = false;
  fixture.detectChanges();
  const page = new ComponentPage(fixture);
  expect(page.tabItem).toBeNull();
});

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