Angular测试中如何mock document.querySelectorAll解决forEach调用报错问题

错误根因 #

你之前的stub逻辑错误是核心问题：你直接将NodeList构造函数本身作为返回值，而非符合接口要求的NodeList实例，导致代码调用forEach方法时找不到对应实现，抛出错误。
补充说明：原生浏览器环境中document.querySelectorAll无匹配元素时会返回空NodeList，不会返回undefined，你遇到的原始报错大概率是测试环境特殊处理或者之前的错误stub逻辑导致的。

方案1：修正测试桩的写法 #

根据你的测试场景选择对应实现：

• 模拟无匹配元素的场景：

// Jest/Jasmine 通用写法
beforeEach(() => {
  // 构造符合接口的空NodeList实例
  const mockEmptyNodeList = Object.assign([], {
    forEach: Array.prototype.forEach
  });
  // 仅匹配.calendar-event选择器时返回mock值，不影响其他调用
  spyOn(document, 'querySelectorAll').withArgs('.calendar-event').and.returnValue(mockEmptyNodeList);
})

• 模拟存在匹配元素的场景：

beforeEach(() => {
  // 构造mock的事件元素
  const mockEventElement = {
    classList: {
      remove: jest.fn() // 用jasmine.createSpy('remove')替换也可以
    }
  };
  // 构造带元素的NodeList实例
  const mockNodeList = Object.assign([mockEventElement], {
    forEach: Array.prototype.forEach
  });
  spyOn(document, 'querySelectorAll').withArgs('.calendar-event').and.returnValue(mockNodeList);
})

方案2：优化业务代码增加兼容性 #

你可以直接在业务代码中增加容错逻辑，无需修改测试用例即可避免该报错：

someMethod() {
   let events = document.querySelectorAll(`.calendar-event`);
   // 增加可选链判断，兼容events为undefined或无forEach方法的极端场景
   events?.forEach?.((event) => {
     event.classList.remove('calendar-read-event');
   });
   //dosomething
}

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