CODEWITHSUNDEEP
reactjstddenzymejestjs
pranami
pranami

Reputation: 1415

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

I have a React component which is used to render Checkbox. The component code has a function which looks like this:

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;
        });
    };

The render function looks like this:

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

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

Now I am trying to write a test for this component where i am just passing the component alongwith the props in shallow menthod of Enzyme.I just want to check if the component is rendered properly by passing some mock data in the test case. The test looks like :

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}
            />
        );
    });
});

But my test fails with the error : TypeError: Cannot read property 'includes' of undefined

The includes property is in the generateCheckboxes( ) function.I have passed the required props in the test case.But I am not sure what is causing the issue.Can someone please help me with this?

Upvotes: 2

Views: 7230

Answers (2)

user3151902
user3151902

Reputation: 3176

When using Jest, the error TypeError: Cannot read property 'includes' of undefined can also happen when using toEqual instead of toMatchObject.

The following code will give the Cannot read property 'includes' of undefined error:

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",
  });
});

Using toMatchObject instead will fix it:

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

Upvotes: 9

Ettienne
Ettienne

Reputation: 336

Because appliedFilters is an array:

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

This portion of your code will resolve to undefined:

props.appliedFilterList[filterType]

Because filterType === 'access' and not an array index.

Try changing appliedFilters to:

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

Upvotes: 1

Related Questions