Тестирование асинхронного кода

Асинхронность в JavaScript является фундаментальной частью современного фронтенд-развития. Фреймворк Inferno, как высокопроизводительная библиотека для создания интерфейсов, активно использует асинхронные операции при работе с состоянием, эффектами и компонентами, особенно в связке с API и внешними источниками данных. Тестирование таких компонентов требует специфических подходов и инструментов.

Асинхронные эффекты и их тестирование

Компоненты Inferno могут содержать асинхронные побочные эффекты, например, вызовы fetch или таймеры в useEffect. Для корректного тестирования необходимо:

  1. Мокировать внешние вызовы — использование библиотек вроде jest.mock или msw позволяет контролировать ответ сервера.
  2. Использовать асинхронные утилиты — waitFor, findBy* из @testing-library/inferno позволяют дождаться завершения асинхронных операций перед проверкой состояния DOM.
  3. Очистка эффектов — функции cleanup и ручное завершение таймеров предотвращают влияние предыдущих тестов на последующие.

Пример использования waitFor для проверки обновления состояния после асинхронного запроса:

import { render, screen, waitFor } from '@testing-library/inferno';
import MyComponent from './MyComponent';

test('загружает данные и отображает их', async () => {
  render(<MyComponent />);
  await waitFor(() => expect(screen.getByText(/данные загружены/i)).toBeInTheDocument());
});

Работа с промисами в тестах

Промисы — основной способ работы с асинхронным кодом. При тестировании следует учитывать:

  • Возврат промиса из теста — это позволяет Jest дождаться завершения асинхронной операции.
  • Использование async/await — делает код более читаемым и предотвращает ошибки, связанные с ранним завершением теста.

Пример:

test('асинхронная функция возвращает результат', async () => {
  const result = await fetchData();
  expect(result).toEqual({ success: true });
});

Таймеры и имитация времени

Inferno-компоненты могут использовать setTimeout, setInterval и другие механизмы планирования. Для точного тестирования:

  • Использовать fake timers (jest.useFakeTimers()) позволяет контролировать ход времени.
  • Продвигать таймеры вручную (jest.advanceTimersByTime) для имитации ожиданий без реальной задержки.

Пример тестирования с таймером:

jest.useFakeTimers();

test('таймер обновляет состояние', () => {
  const { getByText } = render(<TimerComponent />);
  jest.advanceTimersByTime(1000);
  expect(getByText(/1 секунда/i)).toBeInTheDocument();
});

Асинхронные события в компонентах

Кнопки, формы и другие интерактивные элементы часто инициируют асинхронные операции. Важно тестировать не только сам результат, но и поведение интерфейса во время ожидания:

  • Состояния загрузки — проверка наличия индикатора загрузки.
  • Обработка ошибок — тестирование корректного отображения ошибок при отказе API.
  • Изменение DOM после завершения операции — асинхронное обновление элементов.

Пример проверки состояния загрузки:

test('показывает индикатор загрузки при асинхронной операции', async () => {
  render(<AsyncButton />);
  expect(screen.getByText(/загрузка/i)).toBeInTheDocument();
  await waitFor(() => expect(screen.getByText(/готово/i)).toBeInTheDocument());
});

Использование утилит для упрощения асинхронного тестирования

  • @testing-library/inferno предоставляет функции findBy* для асинхронного поиска элементов.
  • flushPromises или аналогичные утилиты помогают дождаться завершения всех промисов перед проверкой состояния.
  • act из Inferno позволяет корректно оборачивать обновления состояния, чтобы избежать предупреждений о “необернутых” асинхронных вызовах.

Пример использования act:

import { act } from 'inferno-test-utils';

test('обновляет состояние компонента после промиса', async () => {
  await act(async () => {
    render(<MyComponent />);
  });
  expect(screen.getByText(/данные загружены/i)).toBeInTheDocument();
});

Ловушки при тестировании асинхронного кода

  • Тест завершается раньше времени — избегается с помощью async/await или возврата промиса.
  • Неправильная очистка эффектов — влияет на соседние тесты, рекомендуется cleanup после каждого теста.
  • Скрытые состояния — иногда DOM обновляется после микротасков, поэтому waitFor или findBy* предпочтительнее синхронных проверок.

Тестирование асинхронного кода в Inferno требует тщательного контроля времени, промисов и состояния компонентов. Комбинация моков, утилит ожидания и правильного управления эффектами позволяет создавать стабильные, предсказуемые тесты, которые точно отражают поведение интерфейса в реальных условиях.

Оглавление