Блог

Я использую i18n, чтобы мое приложение было многоязычным. Кажется, это работает нормально, за исключением случаев, когда я тестирую приложение.

Я визуализирую компонент, названный ProjectNavigation в моем тесте. Этот компонент использует крючок useTranslation для перевода некоторых слов в навигационной панели моего проекта.

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

Когда я визуализирую с ожиданием, единственное, что загружается, — это запасной вариант, который в настоящее время установлен в «Загрузка…».

Я пробовал использовать useSuspense={false} при рендеринге, но тест не запускается, и я получаю эту ошибку:

 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.
 

Похоже, компонент не способен к визуализации, и именно поэтому он показывает только запасной вариант.
Кто-нибудь знает, как справиться с тем, что компонент не может отображаться?