Frontend Academy · Lección

@testing-library/react: render userEvent

Renderice componentes en un DOM simulado, consulte por rol y texto de etiqueta, simule interacciones del usuario con userEvent y compruebe el resultado visible.

@testing-library/react: render userEvent es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

Filosofía de Testing Library

@testing-library fomenta pruebas que se parezcan a la forma en que los usuarios interactúan con la interfaz. Busque por rol, etiqueta y texto, no por detalles de implementación como nombres de clases CSS o elementos internos de los componentes.

Instalación de Testing Library

Instale Testing Library para React y el paquete userEvent para simular interacciones del usuario.

npm install -D @testing-library/react @testing-library/user-event @testing-library/jest-dom

render(): montar un componente

render(<Component />) monta el componente en un DOM simulado. Devuelve funciones de consulta para encontrar elementos.

import { render, screen } from '@testing-library/react';
import { Button } from './Button';

test('renders button with label', () => {
  render(<Button label="Submit" onClick={() => {}} />);
  expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
});

Consultar elementos

Prefiera las consultas en este orden: getByRole (accesible), getByLabelText, getByPlaceholderText, getByText y getByDisplayValue. Utilice queryBy* al comprobar que un elemento no existe. Utilice findBy* para elementos asíncronos.

// Prefer (accessible):
screen.getByRole('button', { name: /submit/i });
screen.getByLabelText('Email');

// For text content:
screen.getByText('Welcome!');

// Existence check:
expect(screen.queryByText('Error')).not.toBeInTheDocument();

// Async appearance:
await screen.findByText('Data loaded');

userEvent: simular acciones del usuario

userEvent simula interacciones reales del usuario: escribir, hacer clic y navegar con el teclado. Es más realista que el antiguo fireEvent.

import userEvent from '@testing-library/user-event';

test('typing in input', async () => {
  const user = userEvent.setup();
  render(<SearchInput />);

  const input = screen.getByRole('textbox', { name: /search/i });
  await user.type(input, 'react hooks');

  expect(input).toHaveValue('react hooks');
});

Probar el envío de formularios

Rellene los campos del formulario y envíelo. Compruebe el resultado: lo que ve el usuario después del envío.

test('submitting the login form', async () => {
  const onLogin = jest.fn();
  const user = userEvent.setup();
  render(<LoginForm onLogin={onLogin} />);

  await user.type(screen.getByLabelText('Email'), 'alice@example.com');
  await user.type(screen.getByLabelText('Password'), 'secret123');
  await user.click(screen.getByRole('button', { name: /sign in/i }));

  expect(onLogin).toHaveBeenCalledWith({ email: 'alice@example.com', password: 'secret123' });
});

Matchers personalizados de jest-dom

@testing-library/jest-dom añade matchers útiles: toBeInTheDocument(), toBeVisible(), toBeDisabled(), toHaveValue(), toHaveClass() y toHaveFocus().

Probar actualizaciones asíncronas de componentes

Utilice waitFor() o findBy* para los elementos que aparecen de forma asíncrona (después de un fetch o de un tiempo de espera).

test('shows data after loading', async () => {
  render(<UserList />);

  expect(screen.getByRole('status')).toHaveTextContent('Loading');

  const items = await screen.findAllByRole('listitem');
  expect(items).toHaveLength(3);
});

Probar estados de carga y error

Simule la respuesta de fetch para probar distintos estados. MSW (Mock Service Worker) es la mejor herramienta para simular respuestas de API en las pruebas.

Pruebas de accesibilidad

Testing Library fomenta la accesibilidad de forma natural: si no puede consultar un elemento por su rol o etiqueta, probablemente no sea accesible. Utilice jest-axe para realizar auditorías automatizadas de accesibilidad en las pruebas.

No pruebe los detalles de implementación

Evite consultar por nombres de clases CSS, importar el estado interno de los componentes o comprobar que se hayan llamado métodos específicos. Pruebe el comportamiento desde la perspectiva del usuario: lo que ve y lo que sucede cuando interactúa.

Comprobación rápida

¿Qué función de consulta de Testing Library debe preferirse para encontrar elementos interactivos?

Resumen: @testing-library/react

render() monta componentes en un DOM simulado. Consulte por rol, etiqueta y texto, no por detalles de implementación. Utilice userEvent.setup() para interacciones realistas del usuario. Utilice findBy* para elementos asíncronos. jest-dom proporciona comprobaciones legibles. Pruebe desde la perspectiva del usuario: lo que ve y hace. Los componentes accesibles son más fáciles de probar.

Preguntas frecuentes

¿La lección «@testing-library/react: render userEvent» es gratis?

Sí — el texto completo de «@testing-library/react: render userEvent» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «@testing-library/react: render userEvent»?

Renderice componentes en un DOM simulado, consulte por rol y texto de etiqueta, simule interacciones del usuario con userEvent y compruebe el resultado visible. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «@testing-library/react: render userEvent»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Configuración de Jest y pruebas básicas
@testing-library/react: render userEvent
@testing-library/vue: montar componentes
Simular módulos y llamadas a API

← Volver a Frontend Academy