Ошибка «Не удается прочитать свойство содержит неопределенное» в Jest и Enzyme - PullRequest
Новая
       36

Ошибка «Не удается прочитать свойство содержит неопределенное» в Jest и Enzyme

0 голосов
/ 17 мая 2018

У меня есть компонент React, который используется для рендеринга Checkbox.Код компонента имеет функцию, которая выглядит следующим образом: 

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. Я просто хочу проверить, правильно ли отображается компонент, передавая некоторые фиктивные данные в тестовом примере.Тест выглядит следующим образом: 

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' из неопределенного

Свойство include находится вФункция generateCheckboxes (). Я прошел необходимые тесты в тестовом примере. Но я не уверен, что является причиной проблемы. Может кто-нибудь помочь мне с этим?

1 Ответ

0 голосов
/ 17 мая 2018

Потому что applyFilters - это массив: 

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"]
};
...