Angular 5单元测试报错：Cannot read property offsetHeight of null 求助

这个问题我碰到过好多次，本质原因其实很简单——单元测试环境里你的DOM元素根本没被渲染出来，导致document.getElementById和querySelector返回了null，自然没法读取offsetHeight属性。下面我给你拆解原因和具体解决办法：

为什么正常运行没问题，测试就报错？ #

Angular应用正常运行时，浏览器会完整渲染组件的DOM结构，你获取元素的代码（比如在ngOnInit或ngAfterViewInit里）执行时，目标元素已经挂载到DOM树上了。

但单元测试是在Jasmine/Karma的虚拟测试环境中运行的：

• 如果你的代码在组件构造函数或ngOnInit里就执行了DOM查询，此时组件视图还没完成初始化，元素根本不存在；
• 就算你在ngAfterViewInit里执行，测试用例如果没正确触发组件的生命周期钩子，也会导致元素未渲染。

具体解决办法 #

1. 确保测试时组件已完成渲染 #

在测试用例里，一定要先调用fixture.detectChanges()触发组件渲染，再执行涉及DOM操作的逻辑。如果组件依赖异步编译，还要用async/await等待组件稳定：

import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { YourComponent } from './your.component';

describe('YourComponent', () => {
  let component: YourComponent;
  let fixture: ComponentFixture<YourComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [YourComponent]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    // 触发初始渲染，让DOM元素挂载到测试环境中
    fixture.detectChanges();
  });

  it('should calculate totalHeight correctly', () => {
    // 此时再执行计算高度的逻辑，元素就存在了
    expect(component.totalHeight).toBeDefined();
  });
});

2. 模拟DOM元素的offsetHeight（推荐用于纯逻辑测试） #

如果你的测试重点是验证高度计算逻辑，而非DOM渲染，可以直接用Jasmine的spy模拟document的查询方法，返回一个带有offsetHeight属性的假元素：

it('should calculate totalHeight correctly', () => {
  // 模拟第一个元素的offsetHeight为100
  spyOn(document, 'getElementById').and.returnValue({ offsetHeight: 100 } as HTMLElement);
  // 模拟第二个元素的offsetHeight为50
  spyOn(document, 'querySelector').and.returnValue({ offsetHeight: 50 } as HTMLElement);

  // 手动触发组件里的高度计算逻辑（假设你把这段代码封装成了方法）
  component.calculateTotalHeight();

  expect(component.totalHeight).toBe(150);
});

3. 改用Angular的@ViewChild替代原生DOM查询（最佳实践） #

直接操作document不符合Angular的组件化思想，也不利于测试。建议用@ViewChild获取元素，这样在测试时更容易控制：

组件代码改造：

import { ViewChild, ElementRef, AfterViewInit } from '@angular/core';

export class YourComponent implements AfterViewInit {
  @ViewChild('rcycPageHeader') rcycPageHeader: ElementRef;
  @ViewChild('brandNavWrapper') brandNavWrapper: ElementRef;
  totalHeight: number;

  ngAfterViewInit() {
    // 从ViewChild获取元素，此时视图已初始化完成
    const headerHeight = this.rcycPageHeader.nativeElement.offsetHeight;
    const navHeight = this.brandNavWrapper.nativeElement.offsetHeight;
    this.totalHeight = headerHeight + navHeight;
  }
}

模板添加引用变量：

<div #rcycPageHeader><!-- 你的头部内容 --></div>
<nav #brandNavWrapper class="menu-wrapper brand-nav-wrapper"><!-- 导航内容 --></nav>

测试时的写法：

it('should calculate totalHeight correctly', () => {
  // 模拟两个元素的offsetHeight
  spyOnProperty(component.rcycPageHeader.nativeElement, 'offsetHeight').and.returnValue(100);
  spyOnProperty(component.brandNavWrapper.nativeElement, 'offsetHeight').and.returnValue(50);

  // 手动触发ngAfterViewInit
  component.ngAfterViewInit();

  expect(component.totalHeight).toBe(150);
});

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