如何在 React TDD 中使用 jest 和 Enzyme 测试组件的状态是否被函数更改

Question

我有一个函数用于将组件的状态更改为空数组。我想测试这个功能。我的函数如下所示：

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 的新手，我正在努力编写这些测试。有人可以建议如何进行吗？

Answer 1

这是工作测试用例，这可能会进一步帮助您：

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