testing-patterns
Provides frontend testing patterns for component tests, custom hook tests, and MSW API mocks; use when writing tests for components, hooks, or integration flows.
Datos de origen
- Repositorio
- sawrus/agent-guides
- Última actividad en el origen
- 16 de octubre de 2026 a las 19:08
- Idioma detectado de SKILL.md
- inglés
- Estrellas
- 19
- Forks
- 4
Opciones de instalación
De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.
Revisa los archivos de origen
Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.
Mostrando SKILL.md
SKILL.md
Instrucciones de origen · Vista previa de solo lectura- name
- testing-patterns
- description
- Provides frontend testing patterns for component tests, custom hook tests, and MSW API mocks; use when writing tests for components, hooks, or integration flows.
# Skill: Frontend Testing Patterns
## When to load
When writing tests for components, hooks, or integration flows.
## Philosophy
Test **behavior**, not implementation. A user doesn't care that you called `setState`; they care that clicking "Submit" shows a success message.
## Component Test Template
```tsx
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { UserCard } from './UserCard';
const defaultUser: User = {
id: '1', name: 'Jane Smith', email: 'jane@example.com', role: 'admin',
};
describe('UserCard', () => {
it('renders user information', () => {
render(<UserCard user={defaultUser} />);
expect(screen.getByText('Jane Smith')).toBeInTheDocument();
});
it('calls onEdit when edit button is clicked', async () => {
const onEdit = vi.fn();
render(<UserCard user={defaultUser} onEdit={onEdit} />);
await userEvent.click(screen.getByRole('button', { name: /edit/i }));
expect(onEdit).toHaveBeenCalledWith(defaultUser.id);
});
});
```
## Custom Hook Testing
```tsx
import { renderHook, act } from '@testing-library/react';
import { useCounter } from './useCounter';
it('increments count', () => {
const { result } = renderHook(() => useCounter(0));
act(() => { result.current.increment(); });
expect(result.current.count).toBe(1);
});
```
## MSW: Mock API Calls
```ts
import { http, HttpResponse } from 'msw';
export const handlers = [
http.get('/api/users', () =>
HttpResponse.json([{ id: '1', name: 'Jane' }])
),
];
```
## Test Type Decision
| Scenario | Test Type |
|:---|:---|
| Component renders | Unit (RTL) |
| User interaction | Unit (RTL + userEvent) |
| Data fetching states | Unit (RTL + MSW) |
| Full user journey | E2E (Playwright) |
Ver en GitHub