为 React Router 测试解决 React Lazy Components答案

【问题标题】：Resolve React Lazy Components for React Router test为 React Router 测试解决 React Lazy Components
【发布时间】：2019-07-07 18:43:02
【问题描述】：

我在 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'));

【问题讨论】：

标签： reactjs react-router jestjs lazy-loading

【解决方案1】：

即使我也是 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;
}

如果您仍然在这个概念上遇到一些问题，我强烈建议您阅读本文 blog

【讨论】：