Создание custom render функции

React Testing Library (RTL) предоставляет простой и удобный API для тестирования компонентов, имитируя реальное взаимодействие пользователей с интерфейсом. В то же время, при написании тестов для сложных компонентов с различными зависимостями, может возникнуть необходимость в настройке окружения тестирования. Одним из наиболее распространённых способов решения этой задачи является создание custom render функции, которая позволяет централизованно конфигурировать тестовую среду и упрощать повторное использование кода.

Зачем нужна custom render функция?

По умолчанию, RTL предоставляет функцию render, которая обрабатывает базовую отрисовку компонента в тестах. Однако, в случае сложных компонентов, которые требуют специфической настройки контекста, состояния или других зависимостей, использование стандартной render может оказаться неэффективным. Для таких случаев создаётся собственная обёртка — custom render функция. Это позволяет централизованно настраивать всё, что необходимо для тестирования, и избавляет от повторяющегося кода в каждом тесте.

Как создать custom render функцию?

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

Пример создания custom render функции:

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

const customRender = (ui, options = {}) => {
  return render(
    <MyContextProvider>
      <BrowserRouter>
        {ui}
      </BrowserRouter>
    </MyContextProvider>,
    options
  );
};

В этом примере создаётся функция customRender, которая оборачивает компонент в провайдеры контекста и маршрутизации. Это позволяет избежать дублирования кода и гарантировать, что все тесты используют одну и ту же конфигурацию.

Использование custom render функции в тестах

Теперь, когда создана custom render функция, можно использовать её в тестах для отрисовки компонентов с учётом всех необходимых зависимостей.

import { screen } from '@testing-library/react';
import MyComponent from '../MyComponent';
import { customRender } from './customRender';

test('MyComponent should render with context and routing', () => {
  customRender(<MyComponent />);

  // Проверка наличия элементов на странице
  expect(screen.getByText(/some text/i)).toBeInTheDocument();
});

Здесь customRender используется вместо стандартного render, что гарантирует правильную настройку контекста и маршрутизации перед выполнением теста.

Расширение функциональности custom render

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

Пример с передачей пропсов:

const customRenderWithProps = (ui, props = {}, options = {}) => {
  return customRender(<MyComponent {...props} />, options);
};

test('MyComponent renders with custom props', () => {
  customRenderWithProps(<MyComponent />, { title: 'Hello' });

  expect(screen.getByText('Hello')).toBeInTheDocument();
});

В этом примере функция customRenderWithProps позволяет передавать пропсы в компонент и тестировать его с разными состояниями.

Использование mock-функций с custom render

В некоторых случаях может потребоваться мокирование функций или сервисов. Это можно сделать, добавив в custom render функцию моки, которые затем будут доступны всем компонентам, использующим эту функцию.

Пример с моком:

import { customRender } from './customRender';
import { MyServiceContext } from '../context/MyServiceContext';
import { mockMyService } from '../services/mockService';

const customRenderWithMockService = (ui, options = {}) => {
  return customRender(
    <MyServiceContext.Provider value={mockMyService}>
      {ui}
    </MyServiceContext.Provider>,
    options
  );
};

test('MyComponent should render data from mock service', () => {
  customRenderWithMockService(<MyComponent />);

  expect(screen.getByText('Mocked Data')).toBeInTheDocument();
});

Здесь контекст с мокированным сервисом передаётся в компонент, что позволяет эффективно тестировать компоненты, которые зависят от внешних сервисов или данных.

Важные аспекты при создании custom render функции

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

  2. Параметры и расширяемость. Важно, чтобы custom render функция оставалась гибкой и расширяемой. Лучше использовать дополнительные параметры для настройки контекста или состояния, чтобы не ограничивать возможность тестирования.

  3. Упрощение тестов. Хорошо настроенная custom render функция упрощает сам процесс написания тестов, избавляя от необходимости многократно повторять одну и ту же конфигурацию.

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

Заключение

Создание custom render функции в React Testing Library позволяет упростить и унифицировать настройку окружения для тестов, особенно когда компоненты зависят от контекста или других внешних данных. Это позволяет сделать тесты более чистыми и легче поддерживаемыми, а также уменьшить повторение кода.

Оглавление