我試圖為一個選單串列撰寫斷言，該串列在完全填充表達條件并排序后呈現，例如：
{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" /span>;
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;
}
uj5u.com熱心網友回復：
問題
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）。
});
uj5u.com熱心網友回復：
它與mockup設定一起作業，而不是familyPackageId字串，我給了值1（索引值）。
it("expects to render package-menu"/span>, () => {
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,
},
],
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/328075.html
標籤：