Обработка ошибок маршрутизатора при внешнем тестировании приложений React

Введение

При тестировании компонентов React, которые тесно связаны с маршрутизацией, вы можете столкнуться с ошибками, связанными с компонентами, специфичными для маршрутизатора, например <Link>. Эти ошибки часто возникают из-за того, что такие компоненты ожидают визуализации в контексте маршрутизации, предоставляемом такими компонентами, как Router или BrowserRouter. В этой статье описывается, как обрабатывать эти ошибки маршрутизатора во время внешнего тестирования.

Проблема

Предположим, у вас есть компонент, который использует <Link> для перехода к другому маршруту:

import { Link } from 'react-router-dom';

const MyComponent = () => {
  return (
    <div>
      <Link to="/about">About</Link>
    </div>
  );
};

Если вы попытаетесь отобразить MyComponent напрямую с помощью функции render() библиотеки тестирования React, вы, скорее всего, увидите сообщение об ошибке. Это связано с тем, что компонент <Link> ожидает отображения внутри компонента маршрутизатора, который обеспечивает необходимый контекст маршрутизации.

Решения

1. Обернуть компонент в маршрутизатор

Самый простой способ решить эту проблему — обернуть компонент маршрутизатором во время тестирования.

import { render } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
import MyComponent from './MyComponent';

it('renders without crashing', () => {
  render(
    <BrowserRouter>
      <MyComponent />
    </BrowserRouter>
  );
});

2. Пользовательская функция рендеринга

Чтобы избежать повторяющегося кода, вы можете создать специальную функцию render, которая автоматически помещает компоненты в маршрутизатор.

import { render as rtlRender } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';

function render(ui, options) {
  return rtlRender(ui, { wrapper: BrowserRouter, ...options });
}

// Usage
it('renders without crashing', () => {
  render(<MyComponent />);
});

3. Глобальная настройка

Альтернативно вы можете установить глобальную оболочку для всех ваших тестов, настроив настройки теста. Это полезно, если почти все ваши компоненты полагаются на контекст маршрутизатора.

import '@testing-library/jest-dom';
import { render as rtlRender } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';

const AllTheProviders = ({ children }) => {
  return <BrowserRouter>{children}</BrowserRouter>;
};

const customRender = (ui, options) =>
  rtlRender(ui, { wrapper: AllTheProviders, ...options });

export * from '@testing-library/react';
export { customRender as render };

Заключение

Ошибки маршрутизатора во время внешнего тестирования обычно возникают из-за того, что некоторые компоненты ожидают контекст маршрутизации, который не предоставляется во время теста. Решения, как правило, просты: оберните компонент необходимым контекстом маршрутизатора индивидуально или глобально. Эти подходы гарантируют, что ваши компоненты имеют необходимые настройки для успешного выполнения во время тестов.