Angular测试出现RangeError: Invalid array length错误，求解决方法

问题背景 #

组件代码运行正常，但执行单元测试时抛出RangeError: Invalid array length错误，相关代码如下：

component.ts #

this.columns = Array.from(Array(this.nbColumn - 1 > 0 ? this.nbColumn - 1 : 0 ).keys())

spec.ts #

describe('HomeComponent', () => {
  let component: HomeComponent;
  let fixture: ComponentFixture<HomeComponent>;

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      imports:[HttpClientModule,RouterTestingModule,MatSnackBarModule],
      declarations: [ HomeComponent ],
      providers:[ ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(HomeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

原因分析 #

测试环境中nbColumn未初始化，默认值为undefined。执行this.nbColumn - 1时，undefined - 1结果为NaN，而Array(NaN)会触发数组长度非法错误——数组构造函数仅接受非负整数作为长度参数。

修复方案 #

方案1：给组件的nbColumn设置默认值 #

在组件类中初始化nbColumn为合法数值，避免未定义状态：

// 在HomeComponent类中添加
nbColumn = 0; // 或根据业务需求设置默认正数，比如1

方案2：增强数组长度的边界校验 #

修改数组生成逻辑，确保输入的长度是合法的非负整数：

const validCount = Math.max(0, typeof this.nbColumn === 'number' ? this.nbColumn - 1 : 0);
this.columns = Array.from(Array(validCount).keys());

方案3：在测试用例中手动初始化nbColumn #

在测试初始化阶段，给组件的nbColumn赋值，避免未定义：

beforeEach(() => {
  fixture = TestBed.createComponent(HomeComponent);
  component = fixture.componentInstance;
  component.nbColumn = 3; // 手动设置合理的初始值
  fixture.detectChanges();
});

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