Как проверить, изменяется ли состояние компонента функцией, используя jest и Enzyme в React TDD

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