如何在反应路由器中测试延迟加载的组件？答案

【问题标题】：How to test a lazy loaded components within the react router?如何在反应路由器中测试延迟加载的组件？
【发布时间】：2022-11-11 05:48:36
【问题描述】：

我需要一种方法来测试一个组件，其中两个其他组件是延迟加载的。

我们正在使用webpack 模块联合.所以这里的ComponentOne 和ComponentTwo 是在App 组件中延迟加载的微前端。所以这里的App 组件是容器应用程序，它包含两个应用程序并提供它们之间的路由。

我的App.tsx 看起来像这样：

import { Suspense, lazy } from 'react';
import { Route, Routes } from 'react-router-dom';

const ComponentOne = lazy(() => import('components/ComponentOne));
const ComponentTwo = lazy(() => import('components/ComponeentTwo'));

export const App = () => {
  return (
    <Suspense fallback={<div>FallbackDummy</div>}>
      <Routes>
        <Route path="/" element={<ComponentOne />} />
        <Route path="/two" element={<ComponentTwo />} />
      </Routes>
    </Suspense>
  );
};

这个 App 组件在我的bootstrap.tsx 文件中使用，如下所示：

import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

import { App } from './app/app';

render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root'),
);

我的App.test.tsx 看起来像这样：

import { Suspense } from 'react';
import {
  render,
  RenderResult,
} from '@testing-library/react';
import { App } from './App';
import '@testing-library/jest-dom';

describe('App component', () => {
  let testedComponent: RenderResult;

  beforeEach(() => {
    testedComponent= render(
      <Suspense fallback={<div>FallbackDummy</div>}>
        <App />
      </Suspense>
    );
  });

  test('should match snapshot', () => {
    expect(testedComponent).toMatchSnapshot();
  });
});

测试在没有 <Routes> 和 <Route> 组件的情况下运行（因此仅包含在中）。但我无法在测试中使用路由器。

【问题讨论】：

嘿，你有没有解决这个问题？

标签： reactjs webpack jestjs react-testing-library webpack-module-federation

【解决方案1】：

我在尝试测试常规延迟加载组件时发现了这个问题，我发现this answer 在这里对我有用。基本上，您需要在react-testing-library 中使用waitFor 函数，以便在完成expect 调用之前加载所有内容。

以下是上面链接的答案中的相关 sn-ps：

LazyLoad.jsx:

import React, {lazy} from 'react'
const LazyComponent = lazy(() => import('./LazyComponent'))
const LazyLoad = () => {
   return (
      <div>
         <div> Lazy component is here: </div>
         <React.Suspense fallback={null}>
             <LazyComponent />
         </React.Suspense>
      </div>
   )
}
export default LazyLoad

LazyComponent.jsx:

import React from 'react'
export default () => <div>I am lazy ! </div>

LazyLoad.spec.jsx:

import React from 'react'
import {render, waitFor } from 'react-testing-library'
import LazyLoad from 'LazyLoad'

test('renders lazy component', async () => {
    const { getByText } = render(<LazyLoad />)
    await waitFor(() => expect(getByText('I am lazy !' )).toBeInTheDocument())
})

【讨论】：