Integration-тестирование

Интеграционное тестирование в приложениях на основе Chakra UI направлено на проверку взаимодействия компонентов между собой, а также их корректного отображения и работы с состояниями, событиями и стилями. В отличие от юнит-тестов, которые проверяют отдельные функции или компоненты изолированно, интеграционные тесты оценивают, как несколько компонентов функционируют вместе в реальных условиях.

Настройка тестовой среды

Для тестирования компонентов Chakra UI рекомендуется использовать связку Jest и React Testing Library. Эта комбинация обеспечивает удобные методы рендеринга компонентов, симуляции событий и проверки DOM.

import { render, screen, fireEvent } from '@testing-library/react';
import { ChakraProvider } from '@chakra-ui/react';
import MyComponent from './MyComponent';

const renderWithChakra = (ui) => {
  return render(<ChakraProvider>{ui}</ChakraProvider>);
};

Ключевой момент: все компоненты Chakra UI должны быть обернуты в ChakraProvider, иначе стили и контекст темы не будут применяться, что может привести к некорректным результатам тестов.

Тестирование пользовательских интерфейсов

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

test('открытие и закрытие модального окна', () => {
  renderWithChakra(<MyComponent />);
  
  const openButton = screen.getByText('Открыть модал');
  fireEvent.click(openButton);
  
  const modal = screen.getByRole('dialog');
  expect(modal).toBeVisible();
  
  const closeButton = screen.getByLabelText('Закрыть');
  fireEvent.click(closeButton);
  
  expect(modal).not.toBeInTheDocument();
});

Здесь проверяется:

  • корректное открытие модального окна при клике на кнопку,
  • видимость диалогового окна,
  • корректное закрытие и удаление из DOM.

Тестирование форм и состояний

Chakra UI предоставляет удобные компоненты форм (Input, Checkbox, Select), которые часто требуют проверки в интеграционных тестах:

test('ввод текста и отправка формы', () => {
  renderWithChakra(<FormComponent />);
  
  const input = screen.getByPlaceholderText('Введите имя');
  fireEvent.change(input, { target: { value: 'Иван' } });
  expect(input.value).toBe('Иван');
  
  const submitButton = screen.getByText('Отправить');
  fireEvent.click(submitButton);
  
  expect(screen.getByText('Привет, Иван')).toBeInTheDocument();
});

Важный аспект: проверка состояния компонентов после событий (например, изменения значения поля или состояния чекбокса) позволяет убедиться, что связанная логика работает корректно.

Работа с темой и стилями

Chakra UI активно использует темизацию и систему стилей, что требует особого внимания в интеграционных тестах. Иногда необходимо проверить, что компонент применяет правильные стили в зависимости от темы:

import { extendTheme } from '@chakra-ui/react';

const theme = extendTheme({
  colors: { brand: { 500: '#123456' } },
});

test('проверка цвета кнопки по теме', () => {
  render(
    <ChakraProvider theme={theme}>
      <Button colorScheme="brand">Кнопка</Button>
    </ChakraProvider>
  );

  const button = screen.getByText('Кнопка');
  expect(button).toHaveStyle('background-color: #123456');
});

Ключевые моменты:

  • Обертывание тестируемого компонента в ChakraProvider с кастомной темой.
  • Проверка стилей с использованием toHaveStyle или других методов React Testing Library.

Симуляция пользовательских событий

Для интеграционных тестов важно проверять реакцию компонентов на события: клики, наведение мыши, фокус, изменение значений. Chakra UI часто предоставляет собственные вспомогательные props (например, onClick, onFocus, onChange), которые нужно обязательно тестировать вместе с состояниями компонентов:

test('смена вкладки Tabs', () => {
  renderWithChakra(
    <Tabs>
      <TabList>
        <Tab>Первый</Tab>
        <Tab>Второй</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>Контент 1</TabPanel>
        <TabPanel>Контент 2</TabPanel>
      </TabPanels>
    </Tabs>
  );

  const secondTab = screen.getByText('Второй');
  fireEvent.click(secondTab);
  
  expect(screen.getByText('Контент 2')).toBeVisible();
});

Асинхронные действия и интеграционные тесты

Многие компоненты Chakra UI взаимодействуют с асинхронными процессами (например, загрузка данных, API-запросы). Для таких случаев используются асинхронные методы findBy* и waitFor:

test('загрузка данных и отображение списка', async () => {
  renderWithChakra(<AsyncList />);
  
  const items = await screen.findAllByRole('listitem');
  expect(items).toHaveLength(3);
});

Практические рекомендации

  • Всегда использовать ChakraProvider для интеграционных тестов.
  • Проверять взаимодействие компонентов и изменения состояния после событий.
  • Симулировать пользовательские действия через fireEvent или userEvent.
  • Для асинхронных компонентов использовать findBy* или waitFor.
  • Проверять корректность стилей и темизации, особенно при кастомных темах.
  • Минимизировать тестирование реализации компонентов и фокусироваться на их поведении в интерфейсе.

Интеграционное тестирование в Chakra UI позволяет убедиться, что комплекс интерфейсных элементов работает согласованно, отображается корректно и реагирует на действия пользователя согласно дизайну и логике приложения.

Оглавление