Проверка реагирования, редукция, рендеринг, возврат неопределенного компонента.

Question

У меня возникает ошибка при выполнении теста:

const rendered = render

Недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получил: undefined. Вы, вероятно, забыли экспортировать свой компонент из файла, в котором он определен, или вы, возможно, перепутали импорт по умолчанию и имена.

Мне нужно проверить список событий, этот список находится в хранилище приставок и используйте 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);
  });
});

мой компонент, который я тестирую:

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;