React + Redux：用玩笑测试失败

Question

我想知道为什么当我将它与 redux hooks 一起使用时测试失败了：

代码运行良好，但由于某种原因测试失败。我无法测试组件是否正在呈现。

<块引用>

组件：

import React, { useEffect, useState } from 'react';
import { fetchAllApis } from '../../../redux/actions/marketplace/marketplaceActions';
import { useDispatch, useSelector, connect } from 'react-redux';
import ApiCard from '../ApiCard/ApiCard';
import Spinner from '../../../components/Extras/Spinner/Spinner';

const ApiSection = ({ apiList, error, loading, categories }) => {

  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(fetchAllApis({ page, category: categories }));
  }, [dispatch, categories]);

  const renderApiCards = () => {
    return apiList.map((each) => (
      <ApiCard key={each.apiId} info={each} data-test="ApiCard" />
    ));
  };

  if (loading) {
    return <Spinner data-test="Spinner" />;
  }

  if (error) {
    return <h1 data-test="Error">Error while fetching</h1>;
  }

  return (
    <div className="ApiSection" data-test="ApiSection">
      <div className="ApiSection__cards">{renderApiCards()}</div>
    </div>
  );
};

const mapStateToProps = ({ marketplaceApiState }) => {
  const { apiList, error, loading } = marketplaceApiState;
  return {
    error,
    loading,
    apiList: Object.values(apiList),
  };
};

export default connect(mapStateToProps)(ApiSection);

这里是对上述组件的测试：

<块引用>

测试：

import React from 'react';
import { mount } from 'enzyme';
import ApiListSection from './ApiListSection';
import { findByTestAttr, createTestStore } from '../../../../testUtils';
import { Provider } from 'react-redux';

const setup = (props = {}) => {
  let initialState = {
    marketPlaceState: {
      apiList: {
        a: { apiId: 'a', name: 'name', description: 'desc', categories: 'cat'}
      },
    },
  };
  const store = createTestStore(initialState);
  const wrapper = mount(
    <Provider store={store}>
      <ApiListSection {...props} />
    </Provider>
  );
  return wrapper;
};

describe('ApiListSection Component', () => {
  let component;
  beforeEach(() => {
    component = setup();
  });

  // assertions
  it('Should render without failing', () => {
    const apiSection = findByTestAttr(component, 'ApiSection');
    expect(apiSection.length).toBe(1);  // <===== FAILING HERE !!!!!
  });
});

非常感谢您的帮助，提前致谢