javascript - 如何在 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);
      });
    });