"Cannot read property includes of undefined" Jest 和 Enzyme 中的错误

Question

我有一个用于呈现复选框的 React 组件。组件代码的函数如下所示：

const generateCheckboxes = (array, filterType) => {
        return array.map((filter, i) => {
            if (!isNullOrUndefined(filter) && filter !== "") {
                const applied = props.appliedFilterList[filterType].includes(filter);
                console.log("yes", props.appliedFilterList[filterType]);
                return (
                    <Row key={i} noLine={i === 0}>
                        <Checkbox checked={applied} onClick={() => props.toggleFilter(filterType, filter)}>
                            {filter}
                        </Checkbox>
                    </Row>
                );
            }
            return false;
        });
    };

渲染函数如下所示：

return (
        <div>
            <div>Access</div>
                {generateCheckboxes(props.accessFilters, "access")}

            <div>Bandwidth</div>
                {generateCheckboxes(props.bandwidthFilters, "bandwidth")}
        </div>   
    );

现在我正在尝试为这个组件编写一个测试，我只是在 Enzyme.I 的浅层方法中传递组件和 props 只是想通过传递一些模拟数据来检查组件是否正确呈现在测试用例中。测试看起来像：

import React from "react";
import { mount, shallow } from "enzyme";
import Checkbox from "../../lib/Checkbox";
import FilterDropdownContent, { Header } from "../components/FilterDropdownContent";
import { generateCheckboxes } from "../components/FilterDropdownContent";
import { access } from "fs";

const accessData = ["Access Type Of The Service"];
const bandwidthData = ["the allowed band width", "the allowed band width"];
const termsFiltersData = ["term associated with the service"];
const appliedFilters = [
    {
        access: ["Access Type Of The Service"],
        bandwidth: ["the allowed band width", "the allowed band width"],
        term: ["term associated with the service"]
    }
];

describe("test the FilterDropdown component", () => {
    it("renders correctly", () => {
        const wrapper = mount(
            <FilterDropdownContent
                accessFilters={accessData}
                bandwidthFilters={bandwidthData}
                appliedFilterList={appliedFilters}
                termsFilters={termsFiltersData}
                toggleFilter={false}
            />
        );
    });
});

但我的测试失败并出现以下错误： TypeError: 无法读取未定义的属性 'includes'

包含属性在 generateCheckboxes( ) 中 function.I 在测试中通过了所需的道具 case.But 我不确定是什么导致 issue.Can 某人请帮我解决这个问题？

Answer 1

因为 appliedFilters 是一个数组：

const appliedFilters = [
    {
        access: ["Access Type Of The Service"],
        bandwidth: ["the allowed band width", "the allowed band width"],
        term: ["term associated with the service"]
    }
];

这部分代码将解析为 undefined:

props.appliedFilterList[filterType]

因为filterType === 'access'而不是数组索引。

尝试将 appliedFilters 更改为：

const appliedFilters = {
    access: ["Access Type Of The Service"],
    bandwidth: ["the allowed band width", "the allowed band width"],
    term: ["term associated with the service"]
};

Answer 2

使用 Jest 时，错误 TypeError: Cannot read property 'includes' of undefined 也可能在使用 toEqual 而不是 toMatchObject 时发生。

以下代码将给出 Cannot read property 'includes' of undefined 错误：

test("should return the correct data", async () => {
  const response = await fetch({ url: "http://localhost/" });

  expect(response).toEqual({
    body: new Blob(["raw data"]),
    status: 200,
    statusText: "OK",
  });
});

改用 toMatchObject 将修复它：

// ...
  expect(response).toMatchObject({
// ...

"Cannot read property includes of undefined" Jest 和 Enzyme 中的错误

"Cannot read property includes of undefined" error in Jest and Enzyme

reactjs

tdd

enzyme

jestjs