Angular单元测试遇Cannot read properties of null错误，求解决方案

以下是针对这类空指针错误的常见排查和解决方法：

• DOM元素未被渲染导致引用为空
  如果组件里用了@ViewChild/@ViewChildren获取DOM元素，或者测试代码直接查询DOM节点，大概率是目标元素没在测试环境中渲染出来。

  • 检查组件模板里的条件渲染逻辑（比如*ngIf），测试时要设置对应的组件属性满足渲染条件，比如把控制显示的变量设为true。
  • 确保在访问DOM元素或视图引用前，调用fixture.detectChanges()触发视图初始化。

• 过早访问未初始化的视图
  刚创建组件实例就去访问视图相关的属性，此时视图还没完成初始化，必然会拿到null。

  • 调整测试代码顺序：先初始化组件必要数据，调用fixture.detectChanges()，再执行后续的DOM操作或属性访问。
  • 如果涉及异步数据加载（比如服务请求），要使用fixture.whenStable()等待异步任务完成后再进行断言。

• 依赖服务模拟不完整
  组件依赖的服务返回null，导致组件逻辑出错，间接引发DOM相关的空指针。

  • 在TestBed配置中，用jasmine.createSpyObj正确模拟依赖服务，给需要的方法设置非null的返回值。
  • 比如模拟一个数据服务时，确保其getData()方法返回预设的有效数据，而非null或undefined。

示例修正代码 #

假设组件中有条件渲染的输入框，测试时需要先满足渲染条件：

// 组件代码片段
@Component({
  template: `<input #usernameInput *ngIf="showInput" />`
})
export class UserComponent {
  @ViewChild('usernameInput') usernameInput!: ElementRef;
  showInput = false;
}

// 测试代码修正
beforeEach(() => {
  fixture = TestBed.createComponent(UserComponent);
  component = fixture.componentInstance;
  // 满足渲染条件
  component.showInput = true;
  // 触发视图渲染
  fixture.detectChanges();
});

it('should access input element successfully', () => {
  // 此时usernameInput不再是null
  expect(component.usernameInput.nativeElement).toBeTruthy();
});

内容的提问来源于stack exchange，提问作者Umut Akıncı