Тестирование React-компонентов — Testing Library + Vitest/Jest, поведенческие проверки от лица пользователя, MSW для мокинга сети. Use при написании или ревью тестов фронтенда.
Installs into .claude/skills of the current project.
Are you the author of React Testing?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/vitammiin-react-testing-agent-vorcl-flow)
---
name: react-testing
description: Тестирование React-компонентов — Testing Library + Vitest/Jest, поведенческие проверки от лица пользователя, MSW для мокинга сети. Use при написании или ревью тестов фронтенда.
version: 1.0.0
---
# Навык: 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.
## Пример
```tsx
test('показывает заказы', async () => {
renderWithProviders(<OrdersList />);
expect(await screen.findByText('Заказ #1')).toBeInTheDocument();
});
```
