Генерация тестов компонентов (роль frontend). Use when нужно покрыть React-компоненты/хуки поведенческими тестами (Testing Library + Vitest); готово = прогнанный зелёный набор, не текст тестов.
Installs into .claude/skills of the current project.
Are you the author of Frontend Test?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/vitammiin-frontend-test)
---
name: frontend-test
description: Генерация тестов компонентов (роль frontend). Use when нужно покрыть React-компоненты/хуки поведенческими тестами (Testing Library + Vitest); готово = прогнанный зелёный набор, не текст тестов.
---
# Задача: тесты компонентов
Напиши тесты для указанного пользователем компонента/фичи.
Тесты проверяют поведение глазами пользователя (роли, текст, взаимодействия), а не детали реализации; готовым считается только прогнанный зелёный набор.
1. Разбери поведение компонента: пропсы, состояния (loading/empty/error/success), пользовательские сценарии. Найди тест-конвенции проекта (Vitest/Jest, расположение файлов) и следуй им.
2. Составь матрицу случаев: happy path, все состояния данных, крайние случаи (пустой список, длинный текст, повторный сабмит, недоступное действие).
3. Напиши поведенческие тесты по `$react-testing`: Testing Library + Vitest, поиск по ролям/тексту, взаимодействия через `user-event`, структура AAA. Границу сети мокай через MSW; свежий `QueryClient` на тест (`retry: false`).
4. Доказательство: прогони тесты и покажи зелёный вывод с числом пройденных. Упавшие почини: если падает из-за реального бага в компоненте — скажи об этом явно, не подгоняй тест под баг. Текст тестов без прогона не считается результатом.
Если область не указана — спроси компонент или предложи непокрытые по свежему diff. Если в проекте нет тест-инфраструктуры — предложи минимальную настройку (Vitest + Testing Library), не тащи зависимости молча.
Опирайся на `$react-testing`, `$react`.
