Crea tu primer mock de Axios [Guía práctica]

¿Te gustaría aprender a crear tu primer mock de Axios? En el amplio y a veces abrumador mundo del desarrollo web, la capacidad de testar de manera eficiente y precisa nuestros códigos es esencial. Sin embargo, cuando trabajamos con API y peticiones HTTP, como las que manejamos a través de la popular librería Axios, las pruebas pueden convertirse en una tarea compleja. ¿Qué sucede si la API está caída? ¿O si queremos probar cómo se comporta nuestro código frente a un error específico del servidor? Aquí es donde crear un mock de Axios se convierte en una habilidad de supervivencia en el mundo de la programación.

¿Por qué necesitamos hacer un mock de Axios?

Axios es una popular biblioteca de JavaScript que usamos para realizar solicitudes HTTP. Sin embargo, durante las pruebas, no queremos depender de un servidor de red real. Aquí es donde entra en juego el mocking.

El mocking o la simulación nos permite crear un objeto que imita el comportamiento de otro objeto. En este caso, estamos creando un mock de Axios para imitar su comportamiento sin tener que hacer una solicitud real.

En palabras más simples, un mock de Axios nos permite imitar la funcionalidad de una petición HTTP real, pero en un ambiente controlado y predecible. Puedes imaginarlo como un doble de acción que toma el lugar del verdadero Axios cuando estamos en el set de grabación de nuestras pruebas. Este doble puede ser dirigido para comportarse exactamente como necesitamos, proporcionando respuestas específicas o incluso simulando errores.

Imagina que estás construyendo una aplicación que obtiene datos de un servidor de clima. Para probar cómo tu aplicación maneja datos corruptos, puedes crear un mock de Axios que devuelve información incorrecta o inesperada. De esta manera, puedes asegurarte de que tu aplicación manejará con gracia incluso las situaciones más tormentosas.

Comenzando con Axios Mock

Lo primero que necesitas es instalar las dependencias necesarias. Vamos a usar Jest como nuestro framework de pruebas y axios-mock-adapter para mockear Axios.

npm install --save axios axios-mock-adapter jest

Crea tu primer mock de Axios

Ahora que tenemos nuestras herramientas listas, vamos a crear nuestro primer mock de Axios.

Importar las dependencias

Lo primero que necesitamos hacer es importar las dependencias.

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

Crear el mock adapter

A continuación, vamos a crear nuestro mock adapter. Este es el objeto que nos permite controlar cómo se manejan las solicitudes de Axios.

let mock = new MockAdapter(axios);

Configurar el mock handler

Ahora vamos a configurar nuestro mock handler. Esto nos permite especificar cómo se debe responder a una determinada solicitud.

mock.onGet('/users').reply(200, {
  users: [
    { id: 1, name: 'John Smith' }
  ]
});

En este caso, estamos diciendo que cualquier solicitud GET a ‘/users’ debe responder con un status 200 y un cuerpo que contiene un array de usuarios.

Realizar la solicitud Axios

Finalmente, realizamos nuestra solicitud Axios. Aunque esto se parece a una solicitud real, Axios usará nuestro mock adapter en lugar de hacer una solicitud de red.

axios.get('/users')
  .then(response => console.log(response.data))
  .catch(error => console.log(error));

Si todo ha ido bien, verás los datos del usuario en tu consola.

Este ha sido un simple ejemplo de cómo puedes usar axios-mock-adapter para hacer un mock de Axios en tus pruebas. Recuerda que puedes configurar múltiples mock handlers para diferentes rutas y métodos, e incluso proporcionar una respuesta por defecto para cualquier solicitud que no coincida con un handler.

El dominio del mocking es una habilidad esencial para cualquier desarrollador y los mock de Axios son una gran manera de mejorar la robustez y la eficiencia de tus pruebas.

¿Quieres saber más?

Ahora que te has adentrado en el mundo del mocking, ¿por qué no llevar tus habilidades al siguiente nivel? Apúntate al Desarrollo Web Full Stack Bootcamp de KeepCoding y aprende mucho más sobre Axios y Jest, además de sumergirte en una variedad de otros temas esenciales en el desarrollo web. Lo mejor de todo es que, al finalizar la formación, entrarás en un sector con alta demanda de profesionales que ofrece salarios altos y una estabilidad laboral que otros sectores no pueden ofrecer. ¡Solicita más información y cambia de vida!