Тестирование (references/testing.md)

Источник: ds-skills/core-ui-development-skills/src/skills/build-core-ui-components/references/testing.md — справочник скилла build-core-ui-components

Основной компонент

  • Размещать <component>.test.tsx рядом с основным компонентом.
  • Использовать render, screen, fireEvent или userEvent согласно test-utils; vi импортировать из Vitest.
  • Проверять публичный контракт: дефолты, варианты, классы, disabled-состояние, обработчики и доступность.
  • Проверять вложенные components/ через публичное поведение основного компонента, без отдельных component-тестов.
  • Не тестировать внутренние переменные и детали реализации.
  • Писать новые описания на русском, сохраняя последовательность существующего файла.
  • Не использовать snapshot как единственную проверку существенного поведения.
  • В каждом тесте React-компонента получать container из render и добавлять expect(container).toMatchSnapshot() после смысловых проверок сценария.
  • Обновлять snapshot только после проверки ожидаемости изменения.
  • Передавать специальные опции render только при необходимости.
  • Сохранять результаты getBy*, queryBy* и findBy* в именованные переменные до блока expect; не выполнять запрос элемента непосредственно внутри утверждения.
  • Выносить повторяющиеся data-testid и тестовые данные в существующие или специально созданные константы. Переиспользовать константы из Storybook example, когда они описывают тот же сценарий и не являются деталями реализации компонента.
const headingDataTestId = `${DATA_TEST_ID}-heading`;

test("не рендерит заголовок без содержимого", () => {
  const { container, queryByTestId } = render(<Component />);
  const heading = queryByTestId(headingDataTestId);

  expect(heading).not.toBeTruthy();
  expect(container).toMatchSnapshot();
});

Не писать запросы внутри утверждений:

expect(queryByTestId(`${DATA_TEST_ID}-heading`)).not.toBeTruthy();

Утилиты

  • Создавать отдельный *.test.ts рядом с каждой утилитой, включая утилиты вложенных компонентов.
  • Проверять основной сценарий, границы и контракт обработки невалидных или пустых данных.
  • Для чистых преобразований проверять отсутствие мутации, когда риск реален.