DEV Community

Khriztian Moreno
Khriztian Moreno

Posted on

C贸mo mockear una solicitud HTTP con Jest 馃捇

Hoy quer铆a mostrarles c贸mo escribir correctamente una prueba.

Pero cualquiera puede encontrar c贸mo ejecutar una prueba sencilla. Y aqu铆, buscamos ayudarle a encontrar respuestas que no encontrar谩 en ning煤n otro lugar.

Entonces pens茅 que llevar铆amos las cosas un paso m谩s all谩.

Ejecutemos una prueba m谩s compleja, en la que tendr谩s que simular 1 o 2 partes de la funci贸n que est谩s probando.

[En caso de que seas nuevo aqu铆: mock es como usar un doble en una pel铆cula. Es una forma de reemplazar una parte complicada de tu c贸digo (como llamar a una API) con algo m谩s simple que pretende ser real, para que pueda probar el resto de tu c贸digo f谩cilmente].

MI testing framework elegido es Jest, porque hace que todo sea mucho m谩s f谩cil:

  1. Configuraci贸n cero: una de las principales ventajas de Jest es su configuraci贸n sin configuraci贸n. Est谩 dise帽ado para funcionar desde el primer momento con una configuraci贸n m铆nima, lo que lo hace muy atractivo para proyectos que desean implementar pruebas de manera r谩pida y eficiente.
  2. Prueba de instant谩neas: Jest introdujo el concepto de Snapshot Testing, que es particularmente 煤til para probar componentes de la interfaz de usuario. Toma una instant谩nea de la salida renderizada de un componente y garantiza que no cambie inesperadamente en pruebas futuras.
  3. Mocking y Spies Integrados: Jest viene con soporte integrado para funciones, m贸dulos y temporizadores simulados, lo que facilita la prueba de componentes o funciones de forma aislada sin preocuparse por sus dependencias.
  4. Compatibilidad con pruebas asincr贸nicas: Jest admite pruebas asincr贸nicas listas para usar, lo cual es esencial para las pruebas en aplicaciones JavaScript modernas que a menudo dependen de operaciones asincr贸nicas como llamadas API o consultas de bases de datos.

Image description

De todos modos, entremos en las pruebas:

Paso 1: configurar tu proyecto

  1. Cree un nuevo directorio de proyecto y navegue hasta 茅l
  2. Inicialice un nuevo proyecto npm: npm init -y
  3. Instale Jest: npm install --save-dev jest
  4. Instale axios para realizar solicitudes HTTP: npm install axios

Estos son los requisitos b谩sicos. Nada nuevo o sofisticado aqu铆. Vamonos.

Paso 2: escribir una funci贸n con una llamada API

Ahora, digamos que inicia sesi贸n en alg煤n tipo de aplicaci贸n. StackOverflow, por ejemplo. Lo m谩s probable es que en la parte superior derecha veas informaci贸n sobre tu perfil. Tal vez su nombre completo y nombre de usuario, por ejemplo.

Para obtenerlos, normalmente tenemos que realizar una llamada a la API para obtenerlos. Entonces, veamos c贸mo har铆amos eso.

  1. Cree un archivo llamado user.js
  2. Dentro de user.js, escriba una funci贸n que realice una llamada API. Por ejemplo, usar axios para recuperar datos del usuario:
// user.js
import axios from 'axios';

export const getUser = async (userId) => {
  const response = await axios.get(`https://api.example.com/users/${userId}`);
  return response.data;
};
Enter fullscreen mode Exit fullscreen mode

Paso 3: crear el archivo de prueba

Bien, ahora que tenemos una funci贸n que nos trae el usuario seg煤n la identificaci贸n que solicitamos, veamos c贸mo podemos probarla.

Recuerde, queremos algo que funcione siempre y para todos los desarrolladores.

Lo que significa que no queremos depender de si el servidor se est谩 ejecutando o no (ya que esto no es lo que estamos probando).

Y no queremos depender de los usuarios que tenemos en la base de datos.

Porque en mi base de datos, el ID1 podr铆a pertenecer a mi usuario administrador, mientras que en su base de datos, el ID1 podr铆a pertenecer a SU usuario administrador.

Esto significa que la misma funci贸n nos dar铆a resultados diferentes. Lo que har铆a que la prueba fallara, aunque la funci贸n funcione correctamente.

Siga leyendo para ver c贸mo abordamos este problema mediante los mocks.

  1. Cree un archivo llamado user.test.js en el mismo directorio.
  2. Dentro de este archivo, importe la funci贸n que desea probar:
import axios from 'axios';
jest.mock('axios');

import { getUser } from './user';
Enter fullscreen mode Exit fullscreen mode
  1. Escriba su caso de prueba, simule la llamada y recupere datos simulados.
test('should fetch user data', async () => {
  // Mock data to be returned by the Axios request
  const mockUserData = { id: '1', name: 'John Doe' };
  axios.get.mockResolvedValue({ data: mockUserData });

  // Call the function
  const result = await getUser('1');

  // Assert that the Axios get method was called correctly
  expect(axios.get).toHaveBeenCalledWith('https://api.example.com/users/1');

  // Assert that the function returned the correct data
  expect(result).toEqual(mockUserData);
});
Enter fullscreen mode Exit fullscreen mode

Paso 4: ejecutar la prueba

  1. Agregue un script de prueba a su package.json:
"scripts": {
  "test": "jest"
}
Enter fullscreen mode Exit fullscreen mode
  1. Ejecute sus pruebas con npm test.

Paso 5: revise los resultados

Jest mostrar谩 el resultado de su prueba en la terminal. La prueba deber铆a pasar, lo que indica que getUser est谩 devolviendo los datos simulados como se esperaba.

Felicitaciones, ahora tienes una prueba funcional con Jest y Mocking.

隆Espero que esto haya sido 煤til y/o te haya hecho aprender algo nuevo!

Profile

@khriztianmoreno

Top comments (0)