【问题标题】：TypeError: arrayObject.sort is not a function in react jest enzymeTypeError：arrayObject.sort 不是反应笑话酶中的函数
【发布时间】：2021-09-21 19:19:21
【问题描述】：

我正在尝试为菜单列表编写断言，该列表在完全填充表达式条件并排序后呈现：

{packageFamilyId && 
packageMap[packageFamilyId] && 
packageMap[packageFamilyId].sort(Constants.sortAlphabeticallyAscending)
.map((p) => (
<MenuItem value={p.id} key={p.id} data-test="package-menu">{p.name}</MenuItem>
}

我将道具传递为：

const props = {
packageFamilyId: 1,
      packageMap: [
        {
          packageFamilyId: [],
        },
        {
          packageFamilyId: [
            {
              active: true,
              code: "0",
              id: 121,
              is_price_applicable: false,
              name: "ctest_name",
              typeId: 2,
            },
 {
              active: true,
              code: "0",
              id: 121,
              is_price_applicable: false,
              name: "btest_name",
              typeId: 2,
            },
 {
              active: true,
              code: "0",
              id: 121,
              is_price_applicable: false,
              name: "atest_name",
              typeId: 2,
            }
          ],
        },
      ],
};

import React from "react";
import { shallow } from "enzyme";
import { componentName } from "./componentName ";
import componentNameMock from "../../../test/mockData/componentName";

describe("componentNameComponent", () => {
const wrapper = shallow(<component {...props} />);
const menuList = wrapper.find("[data-test='package-menu']");
expect(menuList .length()).toEqual(1);
});

但它给了我类型错误： TypeError: packageMap[packageFamilyId].sort 不是函数

             packageMap[packageFamilyId] &&
             packageMap[packageFamilyId]
                 .sort(Constants.sortAlphabeticallyAscending)

.................................................. ..................................... 其中 Constants.sortAlphabeticallyAscending 是排序函数

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

【问题讨论】：

packageFamilyId 是 1 但数组中只有一项，因此 sort() 不是 undefined 的函数
感谢回复，修改了代码，没有影响，按名称对对象列表进行排序，可以查看修改代码，错误依旧

标签： reactjs unit-testing jestjs enzyme

【解决方案1】：

问题

packageMap[packageFamilyId] 是一个对象：

{
  packageFamilyId: [
    {
      active: true,
      code: "0",
      id: 121,
      is_price_applicable: false,
      name: "ctest_name",
      typeId: 2,
    },
    {
      active: true,
      code: "0",
      id: 121,
      is_price_applicable: false,
      name: "btest_name",
      typeId: 2,
    },
    {
      active: true,
      code: "0",
      id: 121,
      is_price_applicable: false,
      name: "atest_name",
      typeId: 2,
    }
  ],
}

这不是一个数组，也没有一个可以调用的函数sort 属性。换句话说，packageMap[packageFamilyId].sort 是未定义且不可调用的。

解决方案

访问是数组的属性并对其进行排序。

{packageMap[packageFamilyId]?.packageFamilyId?.sort(
    Constants.sortAlphabeticallyAscending
  ).map((p) => (
    <MenuItem value={p.id} key={p.id} data-test="package-menu">
      {p.name}
    </MenuItem>
  )
)}

由于指定数组中实际上有 3 个元素，因此应更新测试以断言正确的长度。 length 也是一个属性，而不是一个要调用的函数。

describe("componentNameComponent", () => {
  const wrapper = shallow(<component {...props} />);
  const menuList = wrapper.find("[data-test='package-menu']");
  expect(menuList.length).toEqual(3);
});

【讨论】：

谢谢哥们，你收获颇丰。没有注意到这里的愚蠢错误。

【解决方案2】：

它与模型设置一起使用，而不是 familyPackageId 字符串，我给出了值 1（索引值）。

 it("expects to render package-menu ", () => {
    const wrapper = shallow(<componentNameComponent{...props} />);
    const menuList = wrapper.find("[data-test='package-menu']");
    expect(menuList .length).toEqual(props.packageMap["1"].length);
  });

packageMap: {
    1: [
      {
        id: 4,
        isPriceApplicable: true,
        is_price_applicable: true,
        name: "ctest_name",
        packageAgentType: "FoS",
        typeId: 1,
      },
      {
        id: 3,
        isPriceApplicable: true,
        is_price_applicable: true,
        name: "btest_name",
        packageAgentType: "FoS",
        typeId: 1,
      },
      {
        id: 4,
        isPriceApplicable: true,
        is_price_applicable: true,
        name: "atest_name",
        packageAgentType: "FoS",
        typeId: 1,
      },
    ],
  },

【讨论】：