Cómo usar Mock con Axios Post [Tutorial práctico]

En la vorágine constante del desarrollo web, donde las tecnologías evolucionan a un ritmo acelerado y cada día nos encontramos con nuevas herramientas y metodologías, hay un aspecto fundamental que todos los desarrolladores deben dominar: las pruebas. Y en el vasto universo de las pruebas, hoy nos centraremos en el uso de mock con Axios Post.

¿Alguna vez te has encontrado a ti mismo como desarrollador en la encrucijada de querer probar la funcionalidad de una petición HTTP POST sin tener que depender de una API real o un servidor? Aquí conocerás el concepto de mocking.

Primeros pasos con Axios y Jest

Axios es una biblioteca muy popular para realizar peticiones HTTP en aplicaciones web. Jest, por otro lado, es nuestro entorno de pruebas favorito para JavaScript. En el corazón de Jest, encontramos jest.mock(), una función que nos permite reemplazar la funcionalidad real con implementaciones simuladas, conocidas como mocks.

Entonces, ¿cómo podemos juntar Axios y Jest para hacer nuestras pruebas aún mejores? Aquí es donde entra mock con Axios Post.

Axios es una popular biblioteca de JavaScript que permite realizar peticiones HTTP, mientras que Axios Mock es una excelente herramienta que nos permite crear un mock o simulacro de estas peticiones. Con el uso de Axios Mock en nuestras pruebas, podemos crear respuestas personalizadas para nuestras peticiones HTTP POST, evitando así la necesidad de interactuar con servidores reales.

Por ejemplo, imagina que estás construyendo una aplicación web que necesita hacer una petición POST a una API para registrar a un nuevo usuario. Quieres probar tu función de registro, pero no quieres enviar una petición real a la API cada vez que ejecutes tus pruebas. Aquí es donde mock con Axios Post brilla. Te permite simular la respuesta de la API, de modo que puedes probar cómo tu función de registro maneja diferentes respuestas, sin la necesidad de hacer peticiones reales.

El poder del mock con Axios Post

Mock con Axios Post es un paquete que nos permite simular el comportamiento de Axios en nuestras pruebas. Con él, podemos capturar las solicitudes y definir respuestas mock para que nuestras pruebas sean más predecibles y fáciles de configurar. Vamos a ver cómo funciona con un ejemplo práctico.

Instala axios-mock-adapter

Antes de comenzar, necesitamos instalar axios-mock-adapter. Puedes hacerlo con npm o yarn:

npm install axios-mock-adapter

yarn add axios-mock-adapter

Crea el mock

Una vez instalado mock con Axios Post, ya podemos crear nuestro mock. Aquí es donde reemplazamos la funcionalidad de Axios con nuestra versión simulada. Así es cómo se ve:

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

const mock = new MockAdapter(axios);

mock.onPost('/example').reply(200, {
  data: 'Fake data'
});

En este ejemplo, estamos diciendo que cada vez que se realice una petición POST a ‘/example’, queremos que Axios devuelva un estado 200 con { data: 'Fake data' }.

Haciendo la solicitud

Ahora que hemos configurado nuestro mock, podemos hacer nuestra solicitud de la misma forma en que lo haríamos normalmente con Axios:

axios.post('/example').then(response => {
  console.log(response.data);
});

En lugar de hacer una solicitud real, Axios utilizará nuestra respuesta mock y verás ‘Fake data’ en tu consola.

Realiza un test con Jest

Ahora que sabemos cómo configurar nuestros mocks, vamos a ver cómo podemos utilizarlos en un test con Jest:

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

const mock = new MockAdapter(axios);

test('the request is correct', async () => {
  mock.onPost('/example').reply(200, {
    data: 'Fake data'
  });

  const response = await axios.post('/example');

  expect(response.data).toEqual({ data: 'Fake data' });
});

En este test, estamos verificando que la respuesta de nuestra función axios.post sea igual a la que configuramos en el mock. De esta forma, podemos probar la función sin tener que hacer una petición real.

¿Quieres saber más?

Así de fácil es utilizar mock con Axios Post para simular las peticiones de Axios en tus test. Con este conocimiento en tu arsenal, estarás mejor equipado para escribir pruebas robustas y confiables en tus aplicaciones web.

Si este tutorial sobre mock con Axios Post te ha gustado y quieres aprender más sobre desarrollo web, deberías echarle un vistazo al Desarrollo Web Full Stack Bootcamp de KeepCoding. No solo aprenderás más sobre pruebas unitarias y Jest, sino también todo lo necesario para convertirte en un desarrollador web profesional. ¡Da el salto al mundo IT y pide información ahora para cambiar tu vida con KeepCoding!