Навык: React testing

Поведенческие тесты компонентов на Testing Library + Vitest (или Jest).

Принцип

• Тестируй поведение, а не реализацию: то, что видит и делает пользователь.
• Ищи элементы по доступным ролям/тексту: getByRole, getByLabelText, findByText; избегай тестовых data-testid, где есть роль.
• Взаимодействие — через @testing-library/user-event, а не сырые fireEvent.

Структура (AAA)

• Arrange (рендер + окружение) → Act (действие пользователя) → Assert (видимый результат).
• Оборачивай в нужные провайдеры (QueryClientProvider, стор, тема) через кастомный renderWithProviders.

Сеть и данные

• Мокай границу сети через MSW (msw), а не внутренние модули.
• Для Query-компонентов давай свежий QueryClient на тест (без общего кэша), retry: false.

Асинхронность

• await findBy* / await waitFor(...) для асинхронного UI; не тестируй по таймингу.
• Проверяй состояния loading/empty/error, а не только happy path.

Пример

test('показывает заказы', async () => {
  renderWithProviders(<OrdersList />);
  expect(await screen.findByText('Заказ #1')).toBeInTheDocument();
});