# Frontend Testing

> Escribe tests de frontend centrados en el usuario con Vitest, Testing Library y Playwright, cubriendo unit, integración y E2E, y configura el runner de tests.

- Skill: `leandrobenjaminl/frontend-testing` (Agent Skill)
- Install (CLI): `npx skillmds@latest add leandrobenjaminl/frontend-testing`
- Raw SKILL.md: https://api.skillmd.com/api/skills/leandrobenjaminl/frontend-testing/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend, Coding & Dev Tools, Frontend Frameworks, Testing & QA
- Tags: E2e Testing, Frontend, Msw, Playwright, Testing Library, Unit Testing, Vitest
- License: MIT
- Author: LeandroBenjaminL (https://skillmd.com/u/leandrobenjaminl)
- Updated: 2026-08-22
- Page: https://skillmd.com/skills/leandrobenjaminl/frontend-testing

---


# Skill: frontend-testing

Tests frontend que duelen cuando fallan, no cuando los escribís.

## Trigger

- Terminaste un componente y querés testearlo
- Un bug se coló porque no había test
- Querés configurar Vitest o Playwright
- Necesitás mockear una API o un hook

## Workflow LEND

1. ANALIZAR
   ├── Tipo: ¿unitario (componente/hook), integración (flujo), E2E (navegador)?
   ├── Stack: ¿Vitest ya está configurado? ¿Testing Library?
   ├── Cobertura: ¿qué es crítico? (flujos de auth, pago, carga de datos)
   └── Mock: ¿hay APIs que mockear? (MSW o manual)

2. OFRECER (Menú del Senior)
   ├── A) Unit + Integración — Vitest + Testing Library, mock con MSW
   ├── B) Solo E2E — Playwright, cubrir flujos críticos
   └── C) Pirámide completa — unit + integración + E2E

3. ELEGIR → confirmación

4. HACER
   ├── Vitest: config con jsdom, setup con cleanup automático
   ├── Testing Library: render + screen.findBy/findAllBy (no getBy)
   ├── userEvent sobre fireEvent — simula interacciones reales
   ├── MSW: handlers para APIs, server en setup
   ├── Playwright: tests en chromium, page.goto + page.locator + assertions
   ├── Data-testid: solo para elementos difíciles de ubicar semánticamente
   └── Cobertura: vitest --coverage, mínimo 80% en líneas críticas

5. VERIFICAR
   ├── vitest run pasa sin errores
   ├── npx playwright test pasa en chromium
   └── Los tests fallan si el componente cambia de comportamiento (no por refactor)