Angular单元测试切换Tab后获取元素报错：Cannot read 'nativeElement'

错误原因 #

直接修改component.activeTab = 1后，Angular测试环境不会自动触发视图更新，第二个带*ngIf="activeTab == 1"的<div>还未被渲染，导致fixture.debugElement.query(By.css('#test1'))返回null，后续读取nativeElement时抛出错误。

解决步骤 #

修改测试代码，在设置activeTab后手动触发变更检测，让Angular更新DOM并渲染目标元素：

1. 调用fixture.detectChanges()触发视图更新
2. 若涉及异步数据加载（比如getClientPortalLenderContacts），需确保异步操作完成后再查询元素

修改后的测试代码 #

it('search ', fakeAsync(() => {
  spyOn(component, "searchContacts").and.callThrough();
  // 设置tab值
  component.activeTab = 1;
  // 触发变更检测，更新视图
  fixture.detectChanges();
  
  // 此时目标元素已渲染，可正常查询
  let input = fixture.debugElement.query(By.css('#test1'));
  let el = input.nativeElement;
  el.value = 'Fake 2';
  el.dispatchEvent(new Event('input'));
  
  expect(component.searchContacts).toHaveBeenCalled();
  
  flush();
}));

额外优化建议 #

如果getClientPortalLenderContacts是异步请求（比如HTTP调用），建议提前mock该方法，避免测试依赖外部接口：

// 在测试前mock异步方法
beforeEach(() => {
  fixture = TestBed.createComponent(YourComponent);
  component = fixture.componentInstance;
  // mock异步方法，避免真实请求
  spyOn(component, 'getClientPortalLenderContacts').and.returnValue(of(null));
  fixture.detectChanges();
});

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