如何在 React TDD 中使用 jest 和 Enzyme 测试组件状态是否被函数更改
How to test if state of a component is changed by the function using jest and Enzyme in React TDD
我有一个函数用于将组件的状态更改为空数组。我想测试这个功能。我的函数如下所示:
clearAppliedFilters = () => {
this.setState({
appliedFilterList: {
access: [],
bandwidth: [],
term: [],
},
});
};
我正在为此功能编写如下所示的测试用例:
it('checks clearAppliedFilters 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}
/>,
);
wrapper.setState({
appliedFilterList: {
access: [],
bandwidth: [],
term: [],
},
});
expect(wrapper.instance().clearAppliedFilters()).toBe();
});
但是我看不到我的测试 运行。那么可能是什么问题呢?如果我这看起来不对,任何人都可以帮助我。我是 TDD 的新手,我正在努力编写这些测试。有人可以建议如何进行吗?
这是工作测试用例,这可能对您有进一步的帮助:
https://codesandbox.io/s/xr9295ov3q
import React from "react";
import { shallow } from "enzyme";
import ProductList from "./ProductList";
describe("ProductList Components", () => {
it("should update correct ProductList state", () => {
let wrapper = shallow(<ProductList />);
wrapper.instance().clearAppliedFilters();
expect(wrapper.state().appliedFilterList.access.length).toBe(0);
expect(wrapper.state().appliedFilterList.bandwidth.length).toBe(0);
expect(wrapper.state().appliedFilterList.term.length).toBe(0);
});
});
我有一个函数用于将组件的状态更改为空数组。我想测试这个功能。我的函数如下所示:
clearAppliedFilters = () => {
this.setState({
appliedFilterList: {
access: [],
bandwidth: [],
term: [],
},
});
};
我正在为此功能编写如下所示的测试用例:
it('checks clearAppliedFilters 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}
/>,
);
wrapper.setState({
appliedFilterList: {
access: [],
bandwidth: [],
term: [],
},
});
expect(wrapper.instance().clearAppliedFilters()).toBe();
});
但是我看不到我的测试 运行。那么可能是什么问题呢?如果我这看起来不对,任何人都可以帮助我。我是 TDD 的新手,我正在努力编写这些测试。有人可以建议如何进行吗?
这是工作测试用例,这可能对您有进一步的帮助:
https://codesandbox.io/s/xr9295ov3q
import React from "react";
import { shallow } from "enzyme";
import ProductList from "./ProductList";
describe("ProductList Components", () => {
it("should update correct ProductList state", () => {
let wrapper = shallow(<ProductList />);
wrapper.instance().clearAppliedFilters();
expect(wrapper.state().appliedFilterList.access.length).toBe(0);
expect(wrapper.state().appliedFilterList.bandwidth.length).toBe(0);
expect(wrapper.state().appliedFilterList.term.length).toBe(0);
});
});