如何使用Jest模拟组件中的功能

Question

我正在尝试测试使用反应表插件的组件，其中调用了名为setFilter的函数以从服务器获取用户详细信息。

我想在React表组件中模拟setFilter函数，但我不知道如何模拟该特定函数。

开玩笑：

beforeEach(() => {
    middleware = applyMiddleware(thunk);
    store = createStore(combineReducers({ clerks: clerkReducer }), middleware);
    let mockFn = jest.fn();
    console.log('clerks list', ClerksList);
    wrapper = mount(
      <MemoryRouter>
        <Provider store={store}>
          <ClerksList {...props} dispatch={mockDispatchfn} />
        </Provider>
      </MemoryRouter>,
    );
  });

秘书列表：

export const ClerksList: React.FC = (props: any) => {
  const { clerks, auth } = props;
  const clerksData = values(clerks.data);

  const [isLoading, setLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(clerks.currentPage - 1);
  const [perPage, setPerPage] = useState(clerks.perPage);

  const gotoEdit = (data: any) => {
    props.history.push(`/clerks/${data.id}/edit`);
  };

  const gotoView = (data: any) => {
    props.history.push(`/clerks/${data.id}`);
  };

  const columns = [
    {
      Cell: (cell: any) => {
        return <div>{cell.pageSize * cell.page + cell.index + 1}</div>;
      },
      Header: 'S.No',
      id: 'index',
      maxWidth: 50,
    },
    {
      Cell: (cell: any) => {
        return <div>{cell.original.name}</div>;
      },
      Header: 'Name',
      accessor: 'clerkName',
      maxWidth: 500,
    },
    {
      Cell: (cell: any) => {
        return <div>{cell.original.mobileNo}</div>;
      },
      Header: 'MobileNo',
      accessor: 'mobileNo',
      id: 'mobileNo',
      maxWidth: 120,
    },
    {
      Cell: (cell: any) => {
        return <div>{cell.original.email}</div>;
      },
      Header: 'Email',
      accessor: 'email',
      id: 'email',
      maxWidth: 250,
    },
    {
      Cell: (cell: any) => {
        return (
          <div>
            <RenderOnPermission permission="can_view_clerk" role={auth.role}>
              <Button color="success" onClick={gotoView.bind(props, cell.original)}>
                <MdRemoveRedEye className="button-padding" size={18} />
                View
              </Button>
            </RenderOnPermission>
            &nbsp;&nbsp;
            <RenderOnPermission permission="can_edit_clerk" role={auth.role}>
              <Button color="warning" onClick={gotoEdit.bind(props, cell.original)}>
                <MdModeEdit className="button-padding" size={18} />
                Edit
              </Button>
            </RenderOnPermission>
            &nbsp;&nbsp;
            <RenderOnPermission permission="can_delete_clerk" role={auth.role}>
              <Button color="danger">
                <MdDelete className="button-padding" size={18} />
                Delete
              </Button>
            </RenderOnPermission>
          </div>
        );
      },
      Header: 'Options',
      id: 'options',
      maxWidth: 800,
    },
  ];

  const setFilter = (pagination: any) => {
    props.dispatch(updatePageSize(pagination.pageSize));
    props.dispatch(updateCurrentPage(pagination.page + 1));
    setCurrentPage(pagination.page);
    setPerPage(pagination.pageSize);
    setLoading(true);
    props.dispatch(fetchClerks()).then(() => {
      setLoading(false);
    });
  };

  return (
    <Row className="row-padding">
      <Col lg="12" md="12" sm="12" xs="12">
        <Card>
          <CardHeader>Clerk List</CardHeader>
          <CardBody>
            <ReactTable
              className="-striped -highlight"
              columns={columns}
              data={clerksData}
              defaultPage={currentPage}
              defaultPageSize={clerks.perPage}
              loading={isLoading}
              manual={true}
              onFetchData={setFilter}
              page={currentPage}
              pages={clerks.totalPages}
              resizable={false}
              showPaginationTop={true}
              showPaginationBottom={perPage > 9 ? true : false}
              sortable={false}
              minRows={0}
            />
          </CardBody>
        </Card>
      </Col>
    </Row>
  );
};

export default ClerksList;

我想知道如何从玩笑中模拟setFilter函数。