i18n with Suspense is not loading in React Testing Library

Question

I am using i18n so that my app is multilingual. This seems to work fine, except for when I'm testing the app.

I render a component named ProjectNavigation in my test. This component uses the useTranslation hook to translate some words in my project navbar.

import React from 'react';
import {
  render,
  screen,
} from '@testing-library/react';
import ProjectNavigation from '../pages/ProjectNavigation';

test('Checks to see if project navigation is rendered', () => {
  render(
    <React.Suspense fallback="Loading...">
      <ProjectNavigation useSuspense={false} />
    </React.Suspense>,
  );

  expect(screen.getByRole('navigation')).toBeVisible();
});

When I render with suspense, the only thing that loads is the fallback, which is currently set to "Loading...".

I've tried useSuspense={false} when rendering, but the test will not run and I receive this error:

ProjectNavigation 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.

It seems the component is not able to render, and this is why it only shows the fallback. Anyone know how to deal with the component not being able to render?

you will probably need some setup like this: https://testing-library.com/docs/react-testing-library/setup/ — Noriller, Jul 02 '21 at 14:18
Have you tried using `waitFor` in your assertion? I.e, `await waitFor(() => expect(screen.getByRole('navigation')).toBeVisible());`. — juliomalves, Jul 18 '21 at 13:58
`waitFor` seems to work well as the component now has time to render, thank you so much! — Henrik Moe Wæhre, Jul 19 '21 at 08:02

i18n with Suspense is not loading in React Testing Library

0 Answers0