0Pricing
React Academy · Lección

Probar UI asíncrona y llamadas a API con MSW

Simule solicitudes HTTP con Mock Service Worker para probar componentes que obtienen datos.

Probar UI asíncrona y llamadas a API con MSW es una lección gratuita de React 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 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.

¿Por qué Mock Service Worker?

MSW intercepta las solicitudes HTTP en el nivel de red mediante un Service Worker en el navegador o un interceptor de http en Node, lo que permite simular las API sin modificar el código de la aplicación.

Instalar MSW

Instale MSW y configure el interceptor de Node para las pruebas de Jest/Vitest.

// npm install msw --save-dev

// src/mocks/handlers.ts
import { http, HttpResponse } from 'msw';

export const handlers = [
  http.get('/api/users', () => {
    return HttpResponse.json([{ id: 1, name: 'Alice' }]);
  }),
];

Configurar el servidor simulado

Cree una instancia de setupServer con sus controladores y llame a server.listen() antes de las pruebas, a server.resetHandlers() después de cada una y a server.close() después de todas.

import { setupServer } from 'msw/node';
import { handlers } from './handlers';

const server = setupServer(...handlers);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

Probar un componente que realiza solicitudes

Renderice el componente que activa una solicitud. MSW intercepta la solicitud y devuelve datos simulados. Compruebe lo que ve el usuario después de que se carguen los datos.

test('shows user list after fetch', async () => {
  render(<UserList />);
  expect(screen.getByText('Loading...')).toBeInTheDocument();
  expect(await screen.findByText('Alice')).toBeInTheDocument();
});

Consultas findBy para interfaces asíncronas

Las consultas findBy devuelven una promesa que se resuelve cuando aparece el elemento, con un tiempo de espera máximo predeterminado de 1 segundo. Utilícelas para el contenido que aparece después de operaciones asíncronas.

// findByText waits for the element to appear
const username = await screen.findByText('Alice');
expect(username).toBeInTheDocument();

// waitFor wraps assertions that need to wait
await waitFor(() => {
  expect(screen.getByText('3 users')).toBeInTheDocument();
});

Anular controladores por prueba

Utilice server.use() dentro de una prueba para añadir un controlador de un solo uso que anule el predeterminado únicamente durante esa prueba.

test('shows error on API failure', async () => {
  server.use(
    http.get('/api/users', () => {
      return HttpResponse.json({ message: 'Server error' }, { status: 500 });
    })
  );

  render(<UserList />);
  expect(await screen.findByText('Failed to load users')).toBeInTheDocument();
});

Probar estados de carga

Compruebe el indicador de carga inmediatamente después del renderizado, de forma síncrona, antes de que lleguen los datos asíncronos.

test('shows loading state initially', () => {
  render(<UserList />);
  expect(screen.getByRole('progressbar')).toBeInTheDocument();
  // or
  expect(screen.getByText('Loading...')).toBeInTheDocument();
});

Pruebas de solicitudes POST

Defina un handler POST que valide el cuerpo de la solicitud y devuelva un recurso creado. Verifique que el componente refleje el estado de éxito.

server.use(
  http.post('/api/users', async ({ request }) => {
    const body = await request.json();
    return HttpResponse.json({ id: 2, ...body }, { status: 201 });
  })
);

test('creates a user', async () => {
  const user = userEvent.setup();
  render(<NewUserForm />);
  await user.type(screen.getByLabelText('Name'), 'Bob');
  await user.click(screen.getByRole('button', { name: /create/i }));
  expect(await screen.findByText('User created!')).toBeInTheDocument();
});

Retrasos de red para pruebas realistas

Añada retrasos artificiales a los handlers para probar la interfaz de carga con más detalle mediante la utilidad delay de MSW.

import { delay } from 'msw';

http.get('/api/users', async () => {
  await delay(200);
  return HttpResponse.json([{ id: 1, name: 'Alice' }]);
})

Pruebas con React Query

Envuelva el componente en un QueryClientProvider nuevo para cada prueba, a fin de evitar que el estado se filtre entre pruebas.

function renderWithQuery(ui: React.ReactElement) {
  const queryClient = new QueryClient({
    defaultOptions: { queries: { retry: false } },
  });
  return render(
    <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>
  );
}

Comprobación de los datos de la solicitud

Use un spy de solicitudes dentro de un handler para verificar que la aplicación envió el cuerpo o los encabezados correctos.

let capturedBody: unknown;

server.use(
  http.post('/api/login', async ({ request }) => {
    capturedBody = await request.json();
    return HttpResponse.json({ token: 'abc' });
  })
);

test('sends credentials to API', async () => {
  // ... submit form ...
  expect(capturedBody).toEqual({ email: 'a@b.com', password: 'pass' });
});

MSW en el navegador durante el desarrollo

MSW también funciona en el navegador durante el desarrollo. Ejecute npx msw init public/ para instalar el service worker e importe sus handlers en main.tsx para disponer de una API simulada durante el desarrollo local.

Comprobación rápida

¿Qué tipo de consulta de RTL debe utilizar para comprobar el contenido que aparece después de que se resuelva una llamada a la API?

Resumen

MSW intercepta las solicitudes HTTP reales, lo que hace que las pruebas sean realistas sin acceder a un servidor activo. Use server.use() para sobrescribir handlers en cada prueba, findBy para comprobaciones asíncronas y envuelva las pruebas de React Query en un QueryClientProvider nuevo.

Preguntas frecuentes

¿La lección «Probar UI asíncrona y llamadas a API con MSW» es gratis?

Sí — el texto completo de «Probar UI asíncrona y llamadas a API con MSW» 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 «Probar UI asíncrona y llamadas a API con MSW»?

Simule solicitudes HTTP con Mock Service Worker para probar componentes que obtienen datos. 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 2 de 4.

¿Cuánto tiempo toma la lección «Probar UI asíncrona y llamadas a API con MSW»?

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

  1. Pruebas de integración con React Testing Library
  2. Probar UI asíncrona y llamadas a API con MSW
  3. Primeros pasos con Playwright para React
  4. Probar formularios y flujos de usuario de extremo a extremo
← Volver a React Academy