如何测试在React组件内部被称为笑话和酶的功能

Question

我有一个看起来像的功能：

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

我想使用Jest和Enzyme测试功能generateCheckboxes（）。 因此，我尝试编写以下测试用例：

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

谁能让我知道我要去哪里错了？

Answer 1

在我看来，props.appliedFilterList返回的是未定义的，因此，当尝试评估props.appliedFilterList [filterType]时，会出现以下错误：“ TypeError：无法读取未定义的属性'access'。

您需要传递AppliedFilterList作为道具。

const AppliedFilterList = //您的AppliedFilterList实现

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