Разрешить ленивые компоненты React для теста React Router - PullRequest
Новая
       4

Разрешить ленивые компоненты React для теста React Router

0 голосов
/ 13 февраля 2019

У меня проблема с Jest-тестированием ленивых компонентов React.Ленивые компоненты не преобразуются в компоненты React и вместо этого являются ленивыми объектами, поэтому он выдает ошибку Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object..Как мне разрешить их, чтобы они могли быть элементами для тестирования?Моя настройка ниже.

Я использую React-Router и Redux.Попытка проверить, что определенные компоненты отображаются с каждым маршрутом.

Функция тестовой оболочки настроена следующим образом: 

const mountWithPath = async (path, newProps = {}) => {
    const wrapper = mount(
        <MemoryRouter initialEntries={[path]}>
            <Provider store={store}>
                <Suspense fallback={<div />}>
                    <CompAppNoRouter {...modProps} />
                </Suspense>
            </Provider>
        </MemoryRouter>
    );
    await People;
    await DashboardPage;
    await ActivityPage;
    await Analysis;
    await Upload;
    return wrapper;

При загруженных в тесте ленивых загруженных компонентах:

import { People, DashboardPage, ActivityPage, Analysis, Upload } from '../app';

Из экспорта app.jsx: 

export const People = lazy(() => import('./pages/people/people'));
export const DashboardPage = lazy(() => import('./pages/dashboard/dashboard'));
export const ActivityPage = lazy(() => import('./pages/activity-report/activity-report'));
export const Analysis = lazy(() => import('./pages/analysis/analysis'));
export const Upload = lazy(() => import('./pages/upload'));

1 Ответ

0 голосов
/ 09 апреля 2019

Даже через Я также новичок в React, но я определенно могу сказать, что aysnc / await не нужно обрабатывать компонент ожидания. 

const SomeMemoryFunction = (path, newProps) => {
// sry for redefining a function with same parameter 
// and I don't have idea about passing newProps explicitly
// but pls refer the given blog for clear view.
  return = modProps => (
      <MemoryRouter initialEntries={[path]}>
          <Provider store={store}>
              <Suspense fallback={<div />}>
                  <CompAppNoRouter {...modProps} />
              </Suspense>
          </Provider>
      </MemoryRouter>    
  )  
}

const mountWithPath = (path, newProps = {}) => {
  const wrapper = SomeMemoryFunction(path, newProps);

   Analysis;
   Upload;
  return wrapper;
}

Если вы все еще сталкиваетесь с некоторыми проблемами с этой концепцией,Я настоятельно рекомендую прочитать этот блог

...