Angular 5.2测试中nativeElement.getBoundingClientRect()始终返回0的求助

我之前也碰到过一模一样的问题——Angular测试环境默认不会自动触发浏览器的布局重排，所以哪怕组件看起来渲染了，getBoundingClientRect()也只会返回全0的空值。下面是几个能实打实解决这个问题的办法：

1. 先确保组件完成DOM渲染与变更检测 #

在测试用例里，创建组件实例后一定要调用fixture.detectChanges()，这会让Angular完成数据绑定并把组件挂载到测试DOM中。如果涉及异步组件（比如带async装饰器的），记得用async/await或者fakeAsync/tick来处理异步流程。

2. 强制浏览器计算布局 #

就算DOM已经渲染好了，浏览器可能还没来得及计算元素的位置和尺寸。你可以通过访问任何会触发重排的DOM属性，强制浏览器立即更新布局，比如offsetHeight、offsetWidth：

// 在调用getBoundingClientRect()前执行这行
fixture.nativeElement.offsetHeight;
// 或者直接针对你的锚点元素
anchor.nativeElement.offsetHeight;

这行代码看似没用，但它会迫使浏览器立刻计算元素的布局信息，这样getBoundingClientRect()就能拿到真实的数值了。

3. 给模拟锚点元素设置真实样式 #

别忘了在测试的包装组件里，给作为定位参照的锚点元素设置具体的宽高、位置样式——不然就算触发了布局计算，返回的rect还是会全为0。比如测试模板可以这么写：

<div #anchor style="width: 120px; height: 60px; margin: 30px; position: relative;">
  <popup [anchor]="anchor"></popup>
</div>

完整测试示例 #

import { Component, ViewChild } from '@angular/core';
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { PopupComponent } from './popup.component';

@Component({
  template: `
    <div #anchor style="width: 120px; height: 60px; margin: 30px;">
      <popup [anchor]="anchor"></popup>
    </div>
  `
})
class TestWrapperComponent {
  @ViewChild('anchor') anchor;
}

describe('PopupComponent', () => {
  let fixture: ComponentFixture<TestWrapperComponent>;
  let wrapperComponent: TestWrapperComponent;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [PopupComponent, TestWrapperComponent]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(TestWrapperComponent);
    wrapperComponent = fixture.componentInstance;
    // 触发第一次变更检测，完成DOM渲染
    fixture.detectChanges();
    // 强制浏览器计算锚点元素的布局
    wrapperComponent.anchor.nativeElement.offsetHeight;
  });

  it('should calculate correct position based on anchor', () => {
    const anchorRect = wrapperComponent.anchor.nativeElement.getBoundingClientRect();
    // 现在anchorRect会返回真实的数值，比如width:120, height:60, top:30等
    expect(anchorRect.width).toBe(120);
    expect(anchorRect.height).toBe(60);
    // 这里可以继续验证popup组件的定位逻辑是否正确
  });
});

额外提醒 #

如果你的PopupComponent是在ngAfterViewInit钩子里面调用getBoundingClientRect()，测试时可以用fakeAsync配合tick()，确保生命周期钩子执行完毕后再去获取布局信息。

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