React Jest Enzyme测试报TypeError: arrayObject.sort is not a function问题咨询

报错原因 #

1. 测试传入的packageMap结构和业务代码预期不匹配：业务代码逻辑是直接通过packageMap[packageFamilyId]获取待排序的数组，但你测试中传入的packageMap是索引数组，packageMap[1]取到的是{packageFamilyId: [/* 菜单数组 */]}对象，普通对象没有sort方法，因此触发类型错误。
2. 本质是测试Mock数据的结构和实际生产环境传入组件的packageMap结构不一致导致的问题。

解决方案 #

方案1：调整测试Mock的packageMap结构（推荐，优先确认业务代码逻辑是否正确） #

如果生产环境的packageMap本身就是key为packageFamilyId、value为对应菜单数组的对象，直接修改测试的Mock结构即可：

const props = {
  packageFamilyId: 1,
  // 改为对象结构，key对应packageFamilyId的值，value直接是待排序的数组
  packageMap: {
    1: [
      {
        active: true,
        code: "0",
        id: 121,
        is_price_applicable: false,
        name: "ctest_name",
        typeId: 2,
      },
      {
        active: true,
        code: "0",
        id: 122, // 注意修改id避免key重复报错
        is_price_applicable: false,
        name: "btest_name",
        typeId: 2,
      },
      {
        active: true,
        code: "0",
        id: 123, // 注意修改id避免key重复报错
        is_price_applicable: false,
        name: "atest_name",
        typeId: 2,
      }
    ]
  },
};

同时你当前测试断言期望菜单长度是1，但上面有3条测试数据，需要将断言改为expect(menuList.length()).toEqual(3)，或者调整数组长度匹配你的预期。

方案2：调整业务代码取值逻辑 #

如果生产环境的packageMap确实是你测试传入的数组结构，那修改业务代码的取值逻辑，从对象中取出数组后再排序：

{packageFamilyId && 
packageMap[packageFamilyId] && 
// 新增.packageFamilyId取出目标数组后再排序
packageMap[packageFamilyId].packageFamilyId.sort(Constants.sortAlphabeticallyAscending)
.map((p) => (
<MenuItem value={p.id} key={p.id} data-test="package-menu">{p.name}</MenuItem>
))}

可选优化：完善排序函数兜底逻辑 #

当前排序函数如果入参a或b为undefined时会返回undefined，可能引发排序异常，建议添加兜底返回：

sortAlphabeticallyAscending: (a, b) => { 
  if (a === undefined || b === undefined) return 0;
  if (a.name?.toLowerCase() < b.name?.toLowerCase()) return -1;
  else if (a.name?.toLowerCase() > b.name?.toLowerCase()) return 1;
  else return 0;
}

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