Как протестировать Lazy-компонент с Suspense внутри которого Suspense с помощью testing-library?

Для тестирования Lazy-компонента с использованием Suspense и вложенного Suspense вам понадобится некоторая настройка и используемые инструменты. Я расскажу вам подробно о каждом шаге.

Шаг 1: Установка зависимостей.
Сначала установите необходимые зависимости, включая react, react-dom, react-testing-library и react-dom/test-utils. Вы можете выполнить следующую команду в корне вашего проекта:

npm install --save-dev @testing-library/react react react-dom react-testing-library react-dom/test-utils

Шаг 2: Создание компонента для тестирования.
Создайте компонент, который содержит Lazy-компонент и оберните его в Suspense. Внутри Suspense вы можете добавить вложенный Suspense. Например:

import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));

const App = () => (
  <div>
    <h1>My App</h1>
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
      <Suspense fallback={<div>Loading nested component...</div>}>
        <NestedComponent />
      </Suspense>
    </Suspense>
  </div>
);

export default App;

Шаг 3: Написание теста.
Создайте файл с расширением .test.js и напишите тесты для вашего компонента. Ниже приведен пример тестового файла:

import React from 'react';
import { render, waitForElement } from '@testing-library/react';
import App from './App';

test('renders app with lazy component', async () => {
  const { getByText, findByText } = render(<App />);
  const loadingText = getByText('Loading...');

  expect(loadingText).toBeInTheDocument();

  await waitForElement(() => findByText('Lazy Component'));

  const lazyComponentText = getByText('Lazy Component');
  expect(lazyComponentText).toBeInTheDocument();
});

test('renders nested component', async () => {
  const { getByText, findByText } = render(<App />);
  const nestedLoadingText = getByText('Loading nested component...');

  expect(nestedLoadingText).toBeInTheDocument();

  await waitForElement(() => findByText('Nested Component'));

  const nestedComponentText = getByText('Nested Component');
  expect(nestedComponentText).toBeInTheDocument();
});

Вызывая функцию render, мы рендерим компонент и получаем функцию getByText, которую мы используем для поиска определенного текста. Функция waitForElement ожидает, пока элемент не появится на странице, прежде чем продолжить тест.

В первом тесте мы проверяем, что компонент загрузки отображается, а затем ждем появления ленивого компонента. Затем мы проверяем, что сам компонент отображается на странице.

Во втором тесте мы делаем то же самое для вложенного компонента.

Шаг 4: Запуск тестов.
Запустите тесты с помощью вашего предпочитаемого инструмента для запуска тестов. Например, вы можете выполнить следующую команду в корне вашего проекта:

npm test

Это выполнит все тесты в вашем проекте, включая ваши тесты, написанные с помощью react-testing-library.

Вывод:
Таким образом, вы можете протестировать ленивые компоненты с использованием Suspense и вложенного Suspense с помощью react-testing-library. Вы должны настроить вашу среду, создать компоненты для тестирования и написать тесты, которые проверяют отображение и функциональность ваших компонентов.