如何mock getBoundingClientRect？调用时出现空值错误排查

你遇到的TypeError: Cannot read property 'getBoundingClientRect' of null错误，根源有两个核心问题：

1. Mock的Host元素缺少目标子元素 #

你创建了一个空的<div>作为mockConfig.host，但原逻辑里需要通过querySelector('.icon-dropdown')找到该div下的子元素。因为这个空div里没有.icon-dropdown元素，所以querySelector返回null，后续调用getBoundingClientRect()自然就触发了报错。

2. SpyOn的语法完全错误 #

你写的spyOn('mockConfig.host.querySelector',['getBoundingClientRect'])不符合Jasmine（推测你使用的是Jasmine测试框架）的Spy语法规则：

• spyOn的第一个参数必须是要监听的对象，而不是字符串；
• 第二个参数是字符串类型的方法名，不是数组。

修正后的测试代码方案 #

方案一：模拟真实DOM结构并Spy目标方法 #

这种方式更贴近真实DOM环境，适合需要验证DOM结构的场景：

describe('xxx',()=>{
  ...
  // 1. 创建完整的DOM结构：包含.icon-dropdown的div
  mockConfig.host = document.createElement('div');
  const iconDropdownEl = document.createElement('i');
  iconDropdownEl.className = 'icon-dropdown';
  mockConfig.host.appendChild(iconDropdownEl);

  // 2. 正确Spy目标元素的getBoundingClientRect方法
  spyOn(iconDropdownEl, 'getBoundingClientRect').and.returnValue(new DOMRect(0,0,0,0));
});

方案二：直接Mock方法返回值（更轻量化） #

如果不需要验证DOM结构，只需要模拟方法返回，也可以直接mockquerySelector和getBoundingClientRect的行为：

describe('xxx',()=>{
  ...
  // 1. Mock.icon-dropdown元素的getBoundingClientRect方法
  const mockIconElement = {
    getBoundingClientRect: jasmine.createSpy().and.returnValue(new DOMRect(0,0,0,0))
  };

  // 2. Mock host的querySelector方法，让它返回上面的mock元素
  mockConfig.host = {
    querySelector: jasmine.createSpy().and.returnValue(mockIconElement)
  } as unknown as HTMLElement;
});

两种方案都能解决你的错误，你可以根据测试场景选择合适的方式。

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