我需要一种方法来测试一个组件，其中另外两个组件是延迟加载的。
我们正在使用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>
  );
};

此应用程序组件在我的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>组件（所以只封装了），但是我无法在测试中使用路由器。