React Academy · Lección

Pruebas de integración con React Testing Library

Renderice componentes en las pruebas, dispare eventos y compruebe el resultado visible, no la implementación.

Pruebas de integración con React Testing Library es una lección gratuita de React Academy en CoddyKit. Esta es la lección 1 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 React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

¿Qué es React Testing Library?

React Testing Library (RTL) fomenta las pruebas desde la perspectiva del usuario: renderice los componentes, interactúe con ellos como lo haría un usuario y compruebe el resultado visible en lugar de los detalles de implementación.

Configuración

RTL se incluye con Create React App y la plantilla de React de Vite. Para una configuración manual, instale @testing-library/react y @testing-library/jest-dom.

// package.json
// "@testing-library/react": "^14.0.0",
// "@testing-library/jest-dom": "^6.0.0"

// setupTests.ts
import '@testing-library/jest-dom';

Renderizar un componente

render() monta un componente en un DOM virtual. Devuelve funciones de consulta limitadas al resultado renderizado.

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

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

Consultar elementos

Prefiera las consultas en este orden: getByRole > getByLabelText > getByPlaceholderText > getByText. Las consultas por rol coinciden con la semántica de accesibilidad.

// Best: query by role
const button = screen.getByRole('button', { name: /submit/i });

// Good: query by label (for form inputs)
const input = screen.getByLabelText('Email address');

// Acceptable: query by text
const heading = screen.getByText('Welcome');

Lanzar eventos

Utilice userEvent de @testing-library/user-event, que es la opción preferida, o fireEvent, que es la opción básica. userEvent simula interacciones reales del navegador, incluido el foco y la pérdida de foco.

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

test('types into input', async () => {
  const user = userEvent.setup();
  render(<SearchBar />);
  const input = screen.getByRole('textbox');
  await user.type(input, 'react');
  expect(input).toHaveValue('react');
});

Probar el envío de un formulario

Renderice el formulario, rellene los campos con userEvent.type, haga clic en enviar y compruebe el resultado: un mensaje de éxito, una navegación o una llamada al callback.

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

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

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

Comprobar la visibilidad

Los matchers de jest-dom, como toBeInTheDocument(), toBeVisible() y toHaveValue(), hacen que las comprobaciones sean fáciles de leer.

expect(screen.getByText('Error: required')).toBeInTheDocument();
expect(screen.getByRole('dialog')).toBeVisible();
expect(screen.getByRole('textbox')).toHaveValue('hello');
expect(screen.queryByText('Loading...')).not.toBeInTheDocument();

Probar el renderizado condicional

Utilice queryBy, que devuelve null cuando el elemento está ausente, para comprobar que un elemento no se renderiza. Utilice getBy cuando espere que esté presente.

test('shows error message when validation fails', async () => {
  const user = userEvent.setup();
  render(<SignUpForm />);
  await user.click(screen.getByRole('button', { name: /submit/i }));
  expect(screen.getByText('Email is required')).toBeInTheDocument();
});

Envolver con proveedores

La mayoría de los componentes necesitan un contexto o un router. Envuélvalos en proveedores dentro de la llamada a render o cree un helper personalizado renderWithProviders.

function renderWithProviders(ui: React.ReactElement) {
  return render(
    <QueryClientProvider client={new QueryClient()}>
      <MemoryRouter>
        {ui}
      </MemoryRouter>
    </QueryClientProvider>
  );
}

test('shows user data', () => {
  renderWithProviders(<UserProfile />);
});

Probar cambios de estado

Interactúe con el componente y, después, compruebe que el nuevo estado se refleja en la interfaz. RTL envuelve automáticamente la mayoría de las interacciones en act cuando se utiliza userEvent.

test('counter increments', async () => {
  const user = userEvent.setup();
  render(<Counter />);
  expect(screen.getByText('Count: 0')).toBeInTheDocument();
  await user.click(screen.getByRole('button', { name: /increment/i }));
  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});

Ayudante de depuración de screen

Llame a screen.debug() para imprimir el HTML renderizado actual en la consola; resulta útil cuando falla una consulta y necesita ver qué se ha renderizado realmente.

test('debugging a failing query', () => {
  render(<MyComponent />);
  screen.debug(); // prints rendered HTML
  screen.getByRole('button', { name: /save/i }); // then inspect output
});

Comprobación rápida

¿Qué consulta debe preferir al probar un botón en React Testing Library?

Resumen

RTL renderiza componentes e interactúa con ellos mediante consultas basadas en roles y userEvent. Envuelva los componentes en los proveedores necesarios, utilice los matchers de jest-dom para realizar comprobaciones legibles y prefiera queryBy al comprobar la ausencia de un elemento.

Preguntas frecuentes

¿La lección «Pruebas de integración con React Testing Library» es gratis?

Sí — el texto completo de «Pruebas de integración con React Testing Library» 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 React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Pruebas de integración con React Testing Library»?

Renderice componentes en las pruebas, dispare eventos y compruebe el resultado visible, no la implementación. Practicas React 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 React Academy?

No se requiere experiencia previa. React 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 1 de 4.

¿Cuánto tiempo toma la lección «Pruebas de integración con React Testing Library»?

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 React Academy?

Sí. Cada lección de React 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

Pruebas de integración con React Testing Library
Probar UI asíncrona y llamadas a API con MSW
Primeros pasos con Playwright para React
Probar formularios y flujos de usuario de extremo a extremo

← Volver a React Academy