Gabriel Jiménez | Hace 5 días
Las aplicaciones React modernas dependen constantemente de peticiones HTTP para funcionar correctamente.El problema es que probar estos flujos suele implicar levantar el backend, configurar datos y asumir escenarios difíciles de reproducir.
En este artículo aprenderás cómo probar peticiones al backend con Axios usando React Testing Library y Jest, sin depender de un servidor real, a través de estrategias prácticas que podrás aplicar en tus proyectos.
En una aplicación React moderna, casi todo depende de una petición HTTP: cargar datos, enviar formularios, actualizar estados o ejecutar acciones del usuario. Sin embargo, muchas aplicaciones no prueban estos flujos correctamente.
En esta sección entenderás por qué probar las peticiones HTTP en React es clave para construir frontends más confiables, mantenibles y escalables.
Al probar las peticiones HTTP desde React, no necesitamos levantar el backend, configurar entornos locales ni sincronizar versiones de la API. Las pruebas se ejecutan de forma aislada, rápida y predecible, eliminando dependencias externas que no aportan valor a la prueba del frontend.
Las pruebas no deben depender de datos reales ni de estados previos en la base de datos. Al simular las respuestas HTTP, evitamos crear registros temporales, limpiar información después de cada prueba y lidiar con inconsistencias que solo generan ruido y fragilidad en los tests.
Levantar servicios, contenedores, bases de datos o entornos completos consume memoria, CPU y tiempo. Al mockear las peticiones HTTP, las pruebas se ejecutan en milisegundos, lo que las hace ideales para desarrollo local y pipelines de CI/CD sin requerir infraestructura adicional.
El objetivo del testing en React no es comprobar que Axios funcione, sino que la interfaz reaccione correctamente: loaders, errores, renderizados condicionales, botones deshabilitados y mensajes al usuario. Al controlar las respuestas HTTP, podemos validar exactamente esos comportamientos.
Al tener una aplicación React desacoplada del backend facilita el crecimiento del proyecto. Los cambios en la API no rompen los tests del frontend, y nuevos desarrolladores pueden ejecutar las pruebas sin depender de servicios externos, haciendo el código más mantenible a largo plazo.
Las pruebas que simulan peticiones HTTP describen claramente qué espera el frontend del backend. Estados, respuestas, errores y flujos quedan documentados de forma viva y ejecutable, ayudando a otros desarrolladores a entender el comportamiento de la aplicación sin leer toda la implementación.
Las peticiones HTTP influyen directamente en cómo una aplicación React se comporta frente al usuario.El problema es que sin las herramientas adecuadas, probar estos flujos suele volverse complejo y frágil.
En esta sección entenderás qué papel juegan React Testing Library y Jest al probar peticiones HTTP, y por qué son piezas clave para tus pruebas.
Este punto se refiere a configurar el entorno de testing para interceptar y simular peticiones HTTP, evitando dependencias con un backend real. Jest y React Testing Library permiten controlar las respuestas y garantizar pruebas predecibles.
Este aspecto explica cómo las herramientas de testing reducen la complejidad al escribir pruebas cuando un componente depende de peticiones HTTP. Una buena configuración permite crear pruebas más legibles, mantenibles y enfocadas en el comportamiento.
Este punto se centra en validar cómo la interfaz responde a una petición HTTP desde el punto de vista del usuario final. Se evalúan estados visibles como cargas, errores y renderizado de datos, no detalles internos de implementación.
Este apartado describe el rol de Jest como motor de ejecución de las pruebas. Jest se encarga de correr los tests, evaluar los resultados y detectar problemas en los distintos escenarios de tu negocio.
Axios es una de las librerías más utilizadas para realizar peticiones HTTP en aplicaciones React. El problema es que, sin una estrategia clara, las pruebas pueden volverse frágiles o depender de tener el backend corriendo localmente.
En esta sección conocerás las principales estrategias para probar peticiones HTTP con Axios usando React Testing Library, manteniendo pruebas confiables y enfocadas en el comportamiento del frontend.
Todas las peticiones al backend que se realicen los componentes, deben de pasarse como un prop. Esto permite simular su comportamiento en las pruebas.
Veamos el siguiente ejemplo:
1: import { render, screen } from "@testing-library/react";
2: import { UserList } from "./UserList";
3:
4: test("renderiza usuarios usando la petición inyectada por props", async () => {
5: const fetchUsers = jest.fn().mockResolvedValue([
6: { id: 1, name: "Ana" },
7: { id: 2, name: "Luis" },
8: ]);
9:
10: render(<UserList fetchUsers={fetchUsers} />);
11:
12: expect(await screen.findByText("Ana")).toBeInTheDocument();
13: expect(screen.getByText("Luis")).toBeInTheDocument();
14: expect(fetchUsers).toHaveBeenCalledTimes(1);
15: });
Analicemos
Línea 5-8
Simulamos la data devuelve por el backend cuando se llame a la función “fetchUsers”.
Línea 10
Renderizamos el componente en un navegador simulado.
Línea 12-13
Valimos si el registro de “Ana” y “Luis” se encuentran en el componente.
Línea 14
Verificamos si la función “fetchUsers” se ha invocado por lo menos una vez.
Otra alternativa es interceptar las peticiones para devolver data simulada. Esto quiere decir que, cuando nuestra aplicación hace una request al backend, la interceptamos para devolver una response con data específica según nuestros casos de uso. Para hacer esto, podemos utilizar herramientas como: Nock, Mock Service Worker.
Si quieres aprender como interceptar tus peticiones usando estas herramientas, revisa mis artículos:
Cómo usar Mock Service Worker para simular las llamadas a tu API
Cómo simular tu API en React con Nock y Jest para mejorar tus pruebas
Entre las funcionalidades que ofrece Jest, tenemos los llamados mocks. Podemos usarlos para simular todo el comportamiento de una librería, componente o función.
Veamos el siguiente ejemplo:
Supongamos que realizamos una petición al backend para obtener todos los usuarios.
1: import { useEffect, useState } from "react";
2: import axios from "axios";
3:
4: export function Users() {
5: const [users, setUsers] = useState([]);
6:
7: useEffect(() => {
8: axios.get("/users").then(response => {
9: setUsers(response.data);
10: });
11: }, []);
12:
13: return (
14: <ul>
15: {users.map(user => (
16: <li key={user.id}>{user.name}</li>
17: ))}
18: </ul>
19: );
20: }
Nuestra prueba se vería así:
1: import { render, screen } from "@testing-library/react";
2: import axios from "axios";
3: import { Users } from "./Users";
4:
5: jest.mock("axios");
6:
7: test("muestra la lista de usuarios obtenida desde la API", async () => {
8: axios.get.mockResolvedValue({
9: data: [
10: { id: 1, name: "Juan" },
11: { id: 2, name: "Ana" },
12: ],
13: });
14:
15: render(<Users />);
16:
17: expect(await screen.findByText("Juan")).toBeInTheDocument();
18: expect(screen.getByText("Ana")).toBeInTheDocument();
19: });
Analicemos
Línea 5
Simulamos todo el objeto “axios”. Esto quiere decir que, donde quiera que se importe axios, utilizará el objeto simulado de nuestra prueba en lugar del original.
Línea 8-13
Cuando se invoque el la función axios.get, devolvemos un objeto data una lista de usuarios.
Línea 15
Renderizamos el componente en navegador simulado.
Línea 17-18
Validamos que los usuarios de la lista se muestren en el componente.
Probar los diferentes escenarios que las peticiones del backend pueden tener en nuestras aplicaciones React, aseguran que el usuario pueda utilizar nuestros servicios correctamente y en caso de ocurrir un error, tengan retroalimentación para saber como actuar. Recuerda, el usuario es lo más valioso que tenemos, sin ellos nuestras aplicaciones simplemente no existen.
Te dejo mi hub sobre Testing en React donde agrupo todo lo necesario para aprender a probar tus componentes como un profesional.
Hub sobre Testing en React
