Vue组件Jest测试报RangeError: Invalid array length如何解决

这个RangeError: Invalid array length不是展开运算符本身的语法问题，报错位置指向return [行是TS/JS转译后源码映射偏移导致的，实际错误出在productTypes.flatMap的执行逻辑里，核心触发原因如下：

• 现有代码用productType.domains || []做兜底，只能拦截undefined/null/0/''这类falsy值，挡不住truthy类型的非法值。当测试mock数据或者实际业务入参中，某个productType.domains是truthy但不是数组的值（比如带非法length属性的类数组、未正确初始化的响应式代理对象、类型错误的数字值）时，flatMap会尝试将这个值作为可迭代对象展开，读取到非法length值（负数、超过数组最大长度限制2^32-1的值、Infinity等）时，就会抛出数组长度非法的错误。
• 测试环境下mock数据不完整：Jest+vue-test-utils运行时，如果没有给组件初始化changeLogs.marketConfiguration.productTypes的完整结构，响应式系统初始化或者mock逻辑可能返回非预期的domains值，触发上述错误。

分两部分调整即可解决问题：

1. 改造业务函数的兜底逻辑，用严格类型判断代替短路运算兜底，同时补全顶层属性的空值防护：

affectedDomains(): string {
  // 顶层属性可选链兜底，防止缺字段时提前抛出属性不存在的错误
  const productTypesConfig = this.changeLogs?.marketConfiguration?.productTypes ?? {};
  const productTypes: ProductTypeConfiguration[] = Object.values(productTypesConfig);
  return [
    ...new Set(
      productTypes.flatMap((productType) => {
        // 严格校验domains是否为数组，非数组值统一返回空数组兜底
        return Array.isArray(productType?.domains) ? productType.domains : [];
      })
    )
  ].join(', ');
}

2. 补全测试用例的mock数据：检查测试中传入组件的props、data、store状态，给changeLogs.marketConfiguration.productTypes下的所有配置项补全合法结构，domains字段默认设为数组类型（空数组[]或者预期的字符串数组），避免传入非预期类型的值。

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