Aprende a escribir tests útiles en React centrados en comportamiento real de usuario usando Vitest y React Testing Library.
El testing útil en React no busca validar detalles internos de implementación, sino comportamiento visible para el usuario.
Vitest ofrece ejecución rápida y DX moderna, mientras React Testing Library ayuda a testear componentes desde la perspectiva de uso real.
La idea central: renderizar componente, interactuar como usuario y verificar resultado esperado en pantalla.
Este enfoque da tests más resistentes a refactors y evita fragilidad por cambios de estructura interna.
Un buen test sobrevive cuando refactorizas internamente pero la UX sigue igual.
Evita testear estado interno o métodos privados del componente.
Prefiere assertions sobre texto visible, roles accesibles y efectos de interacción.
Cuanto más se parezca el test al uso real, mayor valor aporta al producto.
Configurar entorno de pruebas correctamente evita falsos negativos y fricción diaria.
Las queries por rol y nombre accesible suelen ser las más robustas.
`getByRole` refleja cómo tecnologías asistivas encuentran elementos.
`getByText` es útil para contenido textual estable y semántico.
Evita depender de `data-testid` salvo cuando no haya alternativa semántica clara.
Aprende a escribir tests útiles en React centrados en comportamiento real de usuario usando Vitest y React Testing Library.
Código del tema: Componentes, estado y render declarativo
Un buen test sobrevive cuando refactorizas internamente pero la UX sigue igual.
Evita testear estado interno o métodos privados del componente.
Prefiere assertions sobre texto visible, roles accesibles y efectos de interacción.
Cuanto más se parezca el test al uso real, mayor valor aporta al producto.
Configurar entorno de pruebas correctamente evita falsos negativos y fricción diaria.
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect } from 'vitest';
import Counter from './Counter';
describe('Counter', () => {
it('incrementa al hacer click', async () => {
render(<Counter />);
const button = screen.getByRole('button', { name: /incrementar/i });
await userEvent.click(button);
expect(screen.getByText('1')).toBeInTheDocument();
});
});Las queries por rol y nombre accesible suelen ser las más robustas.
`getByRole` refleja cómo tecnologías asistivas encuentran elementos.
`getByText` es útil para contenido textual estable y semántico.
Evita depender de `data-testid` salvo cuando no haya alternativa semántica clara.