Javascript Test react redux渲染返回未定义组件

我在进行测试时出现以下错误：

常量渲染=渲染

元素类型无效：应为字符串（对于内置组件） 或类/函数（用于复合组件），但得到：未定义。你 可能忘记了从定义组件的文件中导出组件， 或者您可能混淆了默认导入和命名导入

我必须测试redux存储区中的事件列表，并使用useSelector对列表收费。这是我的测试：

import React from 'react';
import EventsList from './EventsList';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';
import { render, cleanup, fireEvent } from 'react-native-testing-library';
import { BrowserRouter } from 'react-router-dom';
import IEvent from './../../services/events/models/IEvent';
import { configure } from '@testing-library/react';

jest.mock('react-redux', () => ({ useSelector: jest.fn(fn => fn()) }));
afterEach(cleanup);

describe('<EventList />', () => {
  const mockStore = configureStore([]);
  const events: Array<IEvent> = [
    {
      id: '01',
      title: 'test',
      booking: true,
      description: 'description 1',
      venue: 'venue 1',
    },
    {
      id: '02',
      title: 'test',
      booking: true,
      description: 'description 2',
      venue: 'venue 2',
    },
  ];
  it('should display current list of events', () => {
    const store = mockStore({ type: 'FETCH_EVENTS_SUCCESS', data: events });
    const rendered = render(
      <Provider store={store}>
        <BrowserRouter>
          <EventsList />
        </BrowserRouter>
      </Provider>
    );
    const textComponent = rendered.getByTestId('CardContent');

    expect(textComponent.props.children).toContain(2);
  });
});

从“React”导入React；
从“/EventsList”导入事件列表；
从'react redux'导入{Provider}；
从“redux模拟存储”导入configureStore；
从“react native testing library”导入{render，cleanup，fireEvent}；
从“react router dom”导入{BrowserRouter}；
从“/../../services/events/models/IEvent”导入IEvent；
从'@testing library/react'导入{configure}；
mock（'react-redux'，（）=>（{useSelector:jest.fn（fn=>fn（））}））；
每次之后（清理）；
描述（“”，（）=>{
const mockStore=configureStore（[]）；
常量事件：数组=[
{
id:'01'，
标题:"测试",，
预订：是的，
description:'description 1'，
地点：'地点1'，
},
{
id:'02'，
标题:"测试",，
预订：是的，
description:'description 2'，
地点:"地点2"，
},
];
它（'应显示当前事件列表'，（）=>{
const store=mockStore（{type:'FETCH_EVENTS_SUCCESS'，data:EVENTS}）；
常量渲染=渲染(
);
const textComponent=rendered.getByTestId（'CardContent'）；
expect（textComponent.props.children）toContain（2）；
});
});

我正在测试的组件：

import React, { useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { Grid, Container } from '@material-ui/core';

import EventCard from '../../components/EventCard';
import { eventListLoad } from './../../redux/module/events';
import IEvent from './../../services/events/models/IEvent';
import Loading from './../../components/Loading';
import Error from './../../components/Error';

interface IProps {
  events: Array<IEvent>;
}

const EventList = () => {
  const history = useHistory();
  const dispatch = useDispatch();
  let events = useSelector((state: any) => {
    return {
      data: state.events.data,
      loading: state.events.loading,
      error: state.events.error,
    };
  });
  useEffect(() => {
    dispatch(eventListLoad());
  }, [dispatch]);
  if (events === undefined || events.data === undefined) {
    events = {
      data: [],
      loading: false,
      error: false,
    };
  }
  return (
    <>
      {events.error !== '' ? (
        <Error title="Error" subtitle="no events found" />
      ) : events.loading ? (
        <Loading />
      ) : (
        <>
          <Container maxWidth="lg">
            <Grid container spacing={5}>
              {events.data.map((event: IEvent) => (
                <Grid item xs={12} sm={6} md={4} key={event.id}>
                  <EventCard
                    event={event}
                    onActionClick={() =>
                      history.push('event/detail/' + event.id)
                    }
                  />
                </Grid>
              ))}
            </Grid>
          </Container>
        </>
      )}
    </>
  );
};

export default EventList;

import React，{useffect}来自“React”；
从'react router dom'导入{useHistory}；
从'react redux'导入{useDispatch，useSelector}；
从'@material ui/core'导入{Grid，Container}；
从“../../components/EventCard”导入事件卡；
从“/../../redux/module/events”导入{eventListLoad}；
从“/../../services/events/models/IEvent”导入IEvent；
从“/../../components/Loading”导入加载；
从“/../../components/Error”导入错误；
接口IProps{
事件：数组；
}
常量事件列表=（）=>{
const history=useHistory（）；
const dispatch=usedpatch（）；
让事件=使用选择器（（状态：any）=>{
返回{
数据：state.events.data，
加载：state.events.loading，
错误：state.events.error，
};
});
useffect（（）=>{
调度（eventListLoad（））；
}，[发送]；
if（events==未定义| | events.data==未定义）{
事件={
数据：[]，
加载：false，
错误：false，
};
}
返回(
{events.error！=''(
)：事件。加载(
) : (
{events.data.map（（event:IEvent）=>(
history.push（'event/detail/'+event.id）
}
/>
))}
)}
);
};
导出默认事件列表；

这是正确的部件吗？在您的测试中，看起来您是在导入/渲染，而不是。@EdLucas我测试过这是同一个问题