How to test a lazy loaded components within the react router?

I need a way to test a component in which two other components are lazy loaded.

We are using webpack module federation. So here ComponentOne and ComponentTwo are micro-frontends that are lazy loaded inside the App component. So the App component here is the container application that contains both apps and provides routing between them.

My App.tsx looks like this:

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>
  );
};

This App component is used within my bootstrap.tsx file like this:

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

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

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

My App.test.tsx looks like this:

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();
  });
});

The test runs without the <Routes> and <Route> components (so only wrapped in ). But I can't manage to use the router in my tests.