Testing en React
React Testing Library, Jest, Vitest, testing de componentes, mocking, interacciones de usuario, coverage
1¿Cuál es la diferencia principal entre getBy, queryBy y findBy en React Testing Library?
¿Cuál es la diferencia principal entre getBy, queryBy y findBy en React Testing Library?
Respuesta
getBy lanza un error si el elemento no existe (assertions síncronas), queryBy retorna null si el elemento no existe (verificar ausencia), y findBy retorna una Promise para elementos asíncronos. Usa getBy por defecto para elementos que deben existir, queryBy para verificar que un elemento no está presente, y findBy para esperar que un elemento aparezca después de un delay.
2¿Cuál es la ventaja principal de getByRole sobre getByTestId?
¿Cuál es la ventaja principal de getByRole sobre getByTestId?
Respuesta
getByRole fomenta las buenas prácticas de accesibilidad al apuntar a elementos por su rol ARIA semántico (button, textbox, heading), lo que mejora la accesibilidad del componente para lectores de pantalla. getByTestId requiere agregar atributos data-testid artificiales que no aportan valor al usuario final. React Testing Library recomienda priorizar getByRole, getByLabelText y getByText antes que getByTestId.
3¿Cómo probar el renderizado condicional de un elemento que NO está presente en el DOM?
¿Cómo probar el renderizado condicional de un elemento que NO está presente en el DOM?
Respuesta
Usa queryBy para verificar la ausencia de un elemento, ya que retorna null en lugar de lanzar un error. Ejemplo: expect(screen.queryByText('Error')).toBeNull() o expect(screen.queryByText('Error')).not.toBeInTheDocument(). getBy lanzaría un error y haría fallar el test, mientras que findBy espera que el elemento aparezca (timeout si está ausente).
¿Por qué React Testing Library recomienda NO probar los detalles de implementación?
¿Cuál es la diferencia entre render y screen en React Testing Library?
+17 preguntas de entrevista
Otros temas de entrevista React / Next.js
Fundamentos de JavaScript
Fundamentos de React
React Hooks
Ciclo de vida de los componentes
React Router
Gestión de estado con Context
Formularios y Controlled Components
Obtención de datos y API
React Query (TanStack Query)
Styling & CSS-in-JS
Fundamentos de Next.js
TypeScript con React
Data Fetching en Next.js
Server Actions de Next.js
Routing y Navegación en Next.js
API Routes de Next.js
Metadata & SEO en Next.js
Middleware y Auth en Next.js
Zustand State Management
Optimización de Rendimiento en React
Error Boundaries & Error Handling
Advanced React Patterns
Características avanzadas de Next.js
Despliegue y Producción de Next.js
Architecture & Design Patterns
React Server Components
Internacionalización de Next.js
React Security & Buenas Prácticas
Domina React / Next.js para tu próxima entrevista
Accede a todas las preguntas, flashcards, tests técnicos, ejercicios de code review y simuladores de entrevista.
Empieza gratis