Cómo probar fetch con jest-fetch-mock

Probar peticiones HTTP es una de las tareas más importantes cuando se trabaja con aplicaciones que consumen APIs externas. Dominar el uso de mocks para simular respuestas de fetch permite verificar que las funciones de consumo de datos se comportan correctamente, sin depender de servidores reales ni conexiones a internet.

¿Cómo crear una función getData para consumir una API?

Antes de escribir cualquier prueba, se necesita la función que será evaluada. Dentro del proyecto Platzi Store, se crea una carpeta llamada Utils dentro de src, y allí se genera el archivo getData.js [0:30].

La función getData recibe un parámetro llamado API, lo que la hace agnóstica: no importa a qué endpoint se le apunte, siempre ejecutará la misma lógica. Su estructura es directa:

javascript const getData = (API) => { return fetch(API) .then(response => response.json()) .then(response => response) .catch(error => error); };

export default getData;

• Recibe la URL de la API como argumento.
• Realiza la petición con fetch.
• Convierte la respuesta a JSON con .json().
• Retorna el resultado o captura el error con .catch().

Esta función cubre lo mínimo necesario para una petición GET. Si se requiere otro tipo de método HTTP como POST, habría que pasar configuración adicional al fetch.

¿Qué es jest-fetch-mock y cómo se configura?

Para probar fetch sin hacer llamadas reales a un servidor, se utiliza la dependencia jest-fetch-mock [3:15]. Se instala como dependencia de desarrollo:

bash npm install jest-fetch-mock --save-dev

Una vez instalada, es necesario configurarla en el archivo setupTest.js del proyecto, agregando al final la siguiente línea [4:40]:

javascript global.fetch = require('jest-fetch-mock');

Esto reemplaza el fetch global del navegador por el mock, permitiendo interceptar y simular las respuestas de cualquier petición dentro de las pruebas.

¿Cómo se estructura el archivo de prueba?

Dentro de la carpeta __test__, se replica la misma estructura del proyecto. Se crea la carpeta utils y dentro el archivo getData.test.js [3:00]. La convención de mantener la misma jerarquía de carpetas facilita ubicar qué prueba corresponde a cada módulo.

javascript import getData from '../../utils/getData';

describe('Fetch API', () => { beforeEach(() => { fetch.resetMocks(); });

test('Llamar una API y retornar datos', () => { fetch.mockResponseOnce(JSON.stringify({ data: '12345' }));

getData('https://google.com')
  .then((response) => {
    expect(response.data).toEqual('12345');
  });

expect(fetch.mock.calls[0][0]).toEqual('https://google.com');

}); });

¿Qué papel juega beforeEach y resetMocks?

El bloque beforeEach ejecuta fetch.resetMocks() antes de cada prueba [4:10]. Esto garantiza que cada test inicie con un estado limpio, sin respuestas residuales de pruebas anteriores. Es una práctica fundamental para evitar falsos positivos entre tests.

¿Cómo funciona mockResponseOnce y qué se valida?

El método fetch.mockResponseOnce define la respuesta simulada que devolverá el mock cuando se ejecute fetch [5:20]. En este caso, se pasa un objeto con { data: '12345' } convertido a string mediante JSON.stringify.

Cuando getData se ejecuta, no contacta ningún servidor real. En su lugar, recibe la respuesta del mock. La prueba entonces verifica dos cosas:

• El dato recibido es correcto: expect(response.data).toEqual('12345') confirma que la función procesa y retorna la información esperada.
• La URL enviada es la correcta: expect(fetch.mock.calls[0][0]).toEqual('https://google.com') valida que el parámetro se transmitió correctamente a fetch [7:10].

Durante la clase se provocó un fallo intencional cambiando la URL esperada a solo "Google", lo que permitió observar cómo Jest muestra la diferencia entre el valor recibido y el esperado [7:30]. Este tipo de depuración ayuda a entender con precisión qué salió mal y dónde.

Con estas dos validaciones se garantiza que la función getData cumple su propósito: enviar la petición al endpoint correcto y retornar los datos procesados. ¿Has implementado mocks de fetch en tus proyectos? Comparte tu experiencia y las dificultades que encontraste.