Angular轮询服务单元测试rowData.forEach报错解决方案

直接触发rowData.forEach is not a function的根因 #

这个报错和你写的轮询业务逻辑本身无关，本质是测试运行过程中，rowData被赋了非数组类型的值，下游绑定的渲染组件（绝大多数场景是ag-grid这类数据表格组件）在执行变更检测时，会强制对rowData执行forEach遍历渲染行，碰到字符串、普通对象这类非数组类型时，就会直接抛出运行时错误。

顺着测试执行流程往下拆，你当前的测试代码一共踩了4个常见的Angular测试坑，共同导致了报错：

• mock返回值和业务契约完全不匹配：原业务明确约定getDeviceSession返回对象数组，你写的mock直接返回字符串'woo'，这个值一旦被赋值给rowData，必然触发表格组件的forEach报错。
• 没有主动触发组件的ngOnInit生命周期：TestBed初始化组件实例后不会自动执行ngOnInit钩子，你当前的测试代码压根没有启动轮询的订阅逻辑，后续对rowData的所有断言都没有对应的执行路径支撑。
• 依赖真实setTimeout等待30秒的写法极易引发跨测试的状态污染：如果之前的测试用例没有正确清理轮询产生的interval订阅，残留的后台定时器会在30秒后触发回调，刚好匹配你当前测试里设置的mock返回值，把字符串'woo'赋值给rowData，触发变更检测和报错——哪怕你自己的测试逻辑根本没启动轮询，这个残留的副作用也会把测试搞崩。
• 没有对RxJS订阅做生命周期隔离：跨测试用例的订阅残留、定时器残留，是Angular组件测试里最常见的偶发报错来源，也是很多人查半天定位不到问题的核心原因。

修正后可稳定运行的测试用例 #

不要用真实等待30秒的写法，改用Angular提供的fakeAsync虚拟时间调度，既可以把测试耗时从30秒压到毫秒级，也能完全隔离真实定时器的副作用：

// 从@angular/core/testing引入fakeAsync, tick, flushMicrotasks
import { fakeAsync, tick, flushMicrotasks } from '@angular/core/testing';
// 从rxjs引入of简化mock返回写法
import { of } from 'rxjs';

it('should poll device session data at fixed 30s interval and update rowData correctly', fakeAsync(() => {
  // 获取测试环境中注入的DeviceService实例
  const deviceService = TestBed.inject(DeviceService);
  // 严格匹配业务类型mock：返回对象数组而非字符串
  const mockSessionResult = [
    { deviceId: 'sensor-001', status: 'online' },
    { deviceId: 'sensor-002', status: 'offline' }
  ];
  spyOn(deviceService, 'getDeviceSession').and.returnValue(of(mockSessionResult));

  // 前置状态断言：组件初始化阶段rowData为未赋值状态
  expect(component.rowData).toBeUndefined();

  // 主动触发ngOnInit，启动轮询订阅逻辑
  component.ngOnInit();
  // 排空所有微任务，让startWith(0)触发的首次请求回调执行完成
  flushMicrotasks();

  // 验证首次拉取的结果正确赋值给rowData
  expect(deviceService.getDeviceSession).toHaveBeenCalledTimes(1);
  expect(component.rowData).toEqual(mockSessionResult);

  // 快进虚拟时间30秒，验证定时轮询正常触发第二次请求
  tick(30000);
  flushMicrotasks();
  expect(deviceService.getDeviceSession).toHaveBeenCalledTimes(2);

  // 测试结束后清理轮询订阅，避免污染其他测试用例
  component.timeInterval?.unsubscribe();
}));

关键补充注意点 #

业务代码里的错误回调分支已经做了兜底：请求失败且非401状态时会把rowData赋值为空数组[]，这个分支的类型是符合数组要求的，不会触发forEach报错。测试过程中只要保证所有mock的getDeviceSession返回值都是数组类型，同时正确清理测试产生的订阅和定时器，就不会再出现这类偶发的渲染报错。

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