Question

我的组件中有一个看起来像这样的函数：

toggleFilter = (type, name) => {
        const filterApplied = this.state.appliedFilterList[type].includes(name);

        if (filterApplied) {
            //Remove the applied filter
            this.setState(prevState => ({
                appliedFilterList: {
                    ...prevState.appliedFilterList,
                    [type]: prevState.appliedFilterList[type].filter(filter => filter !== name)
                }
            }));
        } else {
            //Add the filter
            this.setState(prevState => ({
                appliedFilterList: {
                    ...prevState.appliedFilterList,
                    [type]: [...prevState.appliedFilterList[type], name]
                }
            }));
        }
    };

其中 appliedFilterList 是一个对象，如下所示：

appliedFilterList: {
                a: [],
                b: [],
                t: []
            },

所以，我正在尝试使用Jest和Enzyme为这个函数编写一个测试用例：

it("checks toggleFilter function", () => {
        const wrapper = shallow(
            <ProductList
                headerText="Hello World"
                productList={data}
                paginationSize="10"
                accessFilters={["a 1", "a 2"]}
                bandwidthFilters={["b 1", "b 2"]}
                termsFilters={["t 1", "t 2"]}
                appliedFilterList={appliedFilter}
            />
        );
        expect(wrapper.instance().toggleFilter()).toBe(true);
    });

其中数据和 appliedFilter 是我使用硬编码值创建的2个数组。

测试用例失败并显示错误 TypeError：无法读取属性＆＃39;包含＆＃39;在toggleFilter中未定义。

我尽可能多地尝试找出测试此功能的方法，但我无法做到。有人可以帮我这个吗？我正在努力解决这个问题。

Answer 1

toggleFilter应该是两个参数。您没有在考试expect(wrapper.instance().toggleFilter())中传入任何内容。这就是引起异常的原因。

如何在React TDD中使用Jest和Enzyme测试函数

1 个答案: