Как проверить функцию в шутку и фермент, который вызывается внутри компонента React - PullRequest
Новая
       29

Как проверить функцию в шутку и фермент, который вызывается внутри компонента React

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

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

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

, и я называю ее так: 

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

Я хочу протестировать функцию generateCheckboxes () с помощью Jest и Enzyme.Итак, я попытался написать следующий тестовый пример: 

const accessFilters = ["Access Type Of The Service", { length: 1 }];
const bandwidthFilters = ["the allowed band width", "the allowed band width", { length: 2 }];

describe("test the component", () => {
    const wrapper = mount(<FilterDropdownContent accessFilters={accessFilters} bandwidthFilters={bandwidthFilters} />);

    it("checks the generateCheckBoxes function", () => {
        expect(wrapper.instance.generateCheckboxes(accessFilters, "access").toBe(true));
    });
});

Но я получаю следующую ошибку: 

 TypeError: Cannot read property 'access' of undefined

      at array.map (src/site-product/components/FilterDropdownContent.js:12:105)
          at Array.map (<anonymous>)

и строку 12 для функции в компоненте, где я получаюошибка: 

 const applied = props.appliedFilterList[filterType].includes(filter);

Может кто-нибудь, пожалуйста, дайте мне знать, где я иду не так?

1 Ответ

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

Мне кажется, что props.appliedFilterList возвращает неопределенное значение, поэтому при попытке оценить props.appliedFilterList [filterType] вы получите такую ​​ошибку: "TypeError: Невозможно прочитать свойство 'access' of undefined".

Вам необходимо передать applicationFilterList в качестве реквизита.

const applyFilterList = // ваша реализация applicationFilterList 

const wrapper = mount(<FilterDropdownContent accessFilters={accessFilters} bandwidthFilters={bandwidthFilters} appliedFilterList={appliedFilterList}/>);
...