如何在React TDD中使用Jest和Enzyme测试功能是否更改了组件的状态

Question

I have a function which is used to change the state of the component to empty arrays. I want to test this function. My function looks like this:

clearAppliedFilters = () => {
  this.setState({
    appliedFilterList: {
      access: [],
      bandwidth: [],
      term: [],
    },
  });
};

I am writing a test case as shown below for this function:

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

But I am not able to see my test running. So what may be the issue? Can anyone please help me if I this looks wrong. I am new to TDD and I am struggling to write these tests. Can someone please suggest how to proceed?

Answer 1

Here is the working test case, this might help you further:

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