Unit-тестирование компонентов

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

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

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

test('рендер кнопки с правильным текстом', () => {
  render(
    <ChakraProvider>
      <Button>Нажми меня</Button>
    </ChakraProvider>
  );
  expect(screen.getByText('Нажми меня')).toBeInTheDocument();
});

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

Тестирование пропсов и вариаций компонентов

Chakra UI предоставляет множество пропсов для настройки компонентов. Unit-тесты должны проверять их влияние на рендер и поведение:

  • variant — визуальная вариация компонента.
  • size — размер кнопки, поля ввода и других элементов.
  • colorScheme — цветовая схема компонента.
import { render } from '@testing-library/react';
import { Button, ChakraProvider } from '@chakra-ui/react';

test('кнопка с цветовой схемой teal имеет соответствующий класс', () => {
  const { container } = render(
    <ChakraProvider>
      <Button colorScheme="teal">Тест</Button>
    </ChakraProvider>
  );
  expect(container.querySelector('button')).toHaveClass('chakra-button--teal');
});

Тестирование пропсов включает проверку того, как компонент реагирует на различные значения: активное состояние, disabled, loading и другие стандартные варианты Chakra UI.

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

Unit-тесты проверяют реакцию компонентов на события, такие как клики, фокус и изменение значения:

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

test('клик по кнопке вызывает переданную функцию', () => {
  const handleClick = jest.fn();
  render(
    <ChakraProvider>
      <Button onCl ick={handleClick}>Кликни</Button>
    </ChakraProvider>
  );

  fireEvent.click(screen.getByText('Кликни'));
  expect(handleClick).toHaveBeenCalledTimes(1);
});

Важно использовать утилиты fireEvent или userEvent, чтобы моделировать реальные действия пользователя и проверять, что компонент корректно их обрабатывает.

Тестирование состояния и интерактивности

Компоненты Chakra UI часто имеют внутреннее состояние, например, Accordion, Tabs, Modal. Unit-тестирование проверяет открытие/закрытие элементов, переключение вкладок и изменения видимости:

import { render, screen, fireEvent } from '@testing-library/react';
import { ChakraProvider, Accordion, AccordionItem, AccordionButton, AccordionPanel } from '@chakra-ui/react';

test('раскрытие панели аккордеона', () => {
  render(
    <ChakraProvider>
      <Accordion>
        <AccordionItem>
          <AccordionButton>Заголовок</AccordionButton>
          <AccordionPanel>Контент</AccordionPanel>
        </AccordionItem>
      </Accordion>
    </ChakraProvider>
  );

  expect(screen.queryByText('Контент')).not.toBeVisible();
  fireEvent.click(screen.getByText('Заголовок'));
  expect(screen.getByText('Контент')).toBeVisible();
});

Тестирование состояния позволяет выявить ошибки взаимодействия компонентов с контекстом Chakra, например некорректное использование useDisclosure или useTabs.

Снапшот-тестирование

Chakra UI компоненты поддерживают snapshоt-тестирование, позволяя фиксировать рендер и отслеживать изменения в DOM:

import { render } from '@testing-library/react';
import { ChakraProvider, Button } from '@chakra-ui/react';

test('снапшот кнопки', () => {
  const { asFragment } = render(
    <ChakraProvider>
      <Button colorScheme="blue">Снапшот</Button>
    </ChakraProvider>
  );
  expect(asFragment()).toMatchSnapshot();
});

Snapshоt полезен для проверки визуальных изменений после обновления Chakra UI или изменения темы. Однако не следует полагаться только на него — лучше сочетать с проверкой конкретного поведения и пропсов.

Мокирование контекста и тем

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

import { extendTheme, ChakraProvider, Button } from '@chakra-ui/react';
import { render, screen } from '@testing-library/react';

const customTheme = extendTheme({
  colors: {
    brand: {
      500: '#1a202c',
    },
  },
});

test('кнопка с кастомной цветовой схемой', () => {
  render(
    <ChakraProvider theme={customTheme}>
      <Button colorScheme="brand">Кастом</Button>
    </ChakraProvider>
  );
  expect(screen.getByText('Кастом')).toBeInTheDocument();
});

Мокирование темы позволяет тестировать компоненты в разных визуальных контекстах и гарантировать, что стили и пропсы применяются корректно.

Стратегии организации unit-тестов

  1. Тестировать только одно поведение на тест — отдельные тесты для пропсов, событий и состояния.
  2. Использовать вспомогательные функции рендера — оборачивать все компоненты в ChakraProvider через кастомную утилиту, чтобы не дублировать код.
  3. Проверять видимость и доступность — использовать getByRole, getByLabelText и toBeVisible для точной проверки UI.
  4. Избегать тестирования реализации — проверять только результат: DOM, текст, классы, поведение, а не внутренние функции.

Unit-тестирование компонентов Chakra UI — это сочетание проверки визуального рендера, поведения пропсов, реакций на события и корректного взаимодействия с темой. Правильная организация тестов и использование контекста ChakraProvider обеспечивают стабильность и надежность компонентов при масштабировании интерфейса.

Оглавление