How to create a test with the React Lazy + Fallback + Children component?

I'm trying to create some tests to check for the following conditions in the App.tsx component:

1. Has my "Router" component been rendered?
2. Does my fallback have a loading container?

Among others.. But I am getting the following error message:

A React component suspended while rendering, but no fallback UI was specified.        Add a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.  

MY COMPONENT:

import React, { Suspense } from 'react';    // React Lazy Components  const Router = React.lazy(() => import('components/router'));    const App = (): JSX.Element => (      <>          <Suspense data-testid='suspense-component' fallback={<div>loading...</div>}>              <Router data-testid='router-component' />          </Suspense>      </>  );    export default App;  

MY TEST:

import React, { Suspense } from 'react';  import { render, screen, getByTestId } from '@testing-library/react';    const App = React.lazy(() => import('App'));  const Router = React.lazy(() => import('components/router'));    describe('Testing App.tsx', () => {      test('should check the lazy component (Routers)', async () => {          const { debug, baseElement } = render(<App />);            debug(baseElement);            expect(baseElement).toMatchSnapshot();          // expect(screen.getByText(/loading.../i)).toBeInTheDocument();      });  });  

How do I fix it?

I don't know if it's possible, but instead of instantiating Suspense in the test file, use Suspense from the component file.

https://stackoverflow.com/questions/67238704/how-to-create-a-test-with-the-react-lazy-fallback-children-component April 24, 2021 at 10:04AM