如何Mock ElementRef与getBoundingClientRect()？已尝试方案未生效

你之前的Mock代码失效的核心原因：getBoundingClientRect是DOM元素的方法，需要通过调用它返回矩形数据，而非直接赋值为对象。

正确的Mock写法如下：

基础版Mock #

const hostRefMock = {
  nativeElement: {
    // 把getBoundingClientRect定义为返回预设值的函数
    getBoundingClientRect: () => ({ top: 10, left: 10 })
  }
};

{ provide: ElementRef, useValue: hostRefMock }

带测试断言的版本（如Jest环境） #

如果需要验证该方法是否被调用，可以用测试框架的mock函数：

{ 
  provide: ElementRef, 
  useFactory: () => ({
    nativeElement: {
      getBoundingClientRect: jest.fn(() => ({ top: 10, left: 10 }))
    }
  }) 
}

这样Mock后，组件中调用elementRef.nativeElement.getBoundingClientRect()时，就会返回你预设的矩形数据，完全贴合真实DOM的行为逻辑。

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