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

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

Установка Cypress производится командой:

npm install cypress --save-dev

Для Playwright:

npm install @playwright/test --save-dev

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

import { ChakraProvider } from "@chakra-ui/react";
import theme from "./theme";

export const AppWrapper = ({ children }) => (
  <ChakraProvider theme={theme}>{children}</ChakraProvider>
);

Настройка тестовой среды для компонентов

При тестировании отдельных компонентов в изоляции стоит использовать mount или render с оберткой ChakraProvider. Для Cypress есть плагин cypress-react-unit-test, а для Playwright — возможность рендерить компоненты через @testing-library/react.

Пример с Cypress:

import { mount } from 'cypress/react18';
import { Button } from '@chakra-ui/react';
import { ChakraProvider } from '@chakra-ui/react';

it('рендерит кнопку с правильным текстом', () => {
  mount(
    <ChakraProvider>
      <Button colorScheme="teal">Click Me</Button>
    </ChakraProvider>
  );

  cy.get('button').should('have.text', 'Click Me');
});

Пример с Playwright + Testing Library:

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

test('кнопка отображается с текстом', async () => {
  const { getByText } = render(
    <ChakraProvider>
      <Button colorScheme="blue">Submit</Button>
    </ChakraProvider>
  );

  expect(getByText('Submit')).toBeTruthy();
});

Управление темами и цветовой схемой

Chakra UI строит интерфейсы на основе темы, что требует проверки E2E функционала с различными цветовыми схемами и режимами (light/dark). Для этого создается отдельный тестовый рендер с кастомной темой:

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

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

mount(
  <ChakraProvider theme={customTheme}>
    <Button colorScheme="brand">Custom Button</Button>
  </ChakraProvider>
);

Тестирование интерактивных компонентов

Компоненты Chakra UI часто используют хук useDisclosure, useToast или модальные окна. В E2E-тестах важно симулировать действия пользователя: клики, фокус, закрытие модальных окон.

Пример модального окна:

import { Button, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, useDisclosure, ChakraProvider } from "@chakra-ui/react";

function TestModal() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  return (
    <ChakraProvider>
      <Button onCl ick={onOpen}>Open Modal</Button>
      <Modal isOpen={isOpen} onCl ose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Header</ModalHeader>
          <ModalBody>Body Content</ModalBody>
          <ModalFooter>
            <Button onCl ick={onClose}>Close</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </ChakraProvider>
  );
}

// Cypress E2E тест
cy.get('button').contains('Open Modal').click();
cy.get('[role="dialog"]').should('be.visible');
cy.get('button').contains('Close').click();
cy.get('[role="dialog"]').should('not.exist');

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

Chakra UI использует анимации через framer-motion. Для E2E важно корректно ожидать завершение анимаций. В Cypress можно использовать cy.wait() или проверять видимость через should('be.visible'). В Playwright применяются await page.waitForSelector('[selector]') с опцией state: 'visible'.

Тестирование форм и валидации

Компоненты FormControl, Input, Select и другие требуют проверки состояния ошибки и взаимодействий с пользователем.

import { FormControl, FormLabel, Input, FormErrorMessage, ChakraProvider } from "@chakra-ui/react";
import { useState } from "react";

function TestForm() {
  const [value, setValue] = useState("");
  const isError = value === "";
  return (
    <ChakraProvider>
      <FormControl isInvalid={isError}>
        <FormLabel>Имя</FormLabel>
        <Input value={value} onCha nge={(e) => setValue(e.target.value)} />
        {isError && <FormErrorMessage>Поле обязательно</FormErrorMessage>}
      </FormControl>
    </ChakraProvider>
  );
}

// Cypress
cy.get('input').clear();
cy.get('input').blur();
cy.contains('Поле обязательно').should('be.visible');

Рекомендации по структуре E2E-тестов

  • Организация по страницам: каждый модуль Chakra UI тестируется как отдельный блок.
  • Использование оберток: все тесты должны рендериться внутри ChakraProvider.
  • Стабильные селекторы: использовать data-testid или role для селекции элементов, избегать CSS-классов, которые могут меняться при обновлении библиотеки.
  • Темы и режимы: проверять компоненты как в светлой, так и в темной теме.
  • Асинхронные действия: учитывать анимации и задержки при кликах, модальных окнах, открытии меню и toast-сообщений.

Практика интеграции с CI/CD

Для автоматизации E2E-тестов Chakra UI интегрируют с CI/CD пайплайнами. Cypress и Playwright поддерживают headless режим, что позволяет запускать тесты без графического интерфейса. Для стабильности тестов рекомендуется:

  • использовать фиксированные размеры viewport;
  • очищать состояние перед каждым тестом;
  • мокать сетевые запросы при необходимости.

Такая организация обеспечивает детальное покрытие функционала компонентов Chakra UI и предотвращает регрессии при обновлении библиотеки или темы.

Оглавление