Cómo simular llamadas API realizadas dentro de un componente React que se está probando con Jest

Contamos con la solución a esta contrariedad, al menos eso deseamos. Si tienes preguntas compártelo en un comentario y sin dudarlo te ayudaremos

Por defecto jest.mock las llamadas son levantadas por babel-jest…

…esto significa que se ejecutan antes que cualquier otra cosa en su archivo de prueba, por lo que las variables declaradas en el archivo de prueba aún no estarán dentro del alcance.

Por eso la fábrica de módulos pasó a jest.mock no puede hacer referencia a nada fuera de sí mismo.

---

Una opción es mover los datos en el interior la fábrica de módulos así:

jest.mock("../utils/userUtils", () => 
  const users = [ /* mock users data */ ];
  return 
    getUsers: jest.fn(() => Promise.resolve(users))
  ;
);
jest.mock("../utils/roleUtils", () => 
  const roles = [ /* mock roles data */ ];
  const usersWithRoles = [ /* mock usersWithRoles data */ ];
  return 
    getRolesWithUsers: jest.fn(() => Promise.resolve(usersWithRoles)),
    getRoles: jest.fn(() => Promise.resolve(roles))
  ;
);

---

Otra opción es simular las funciones usando jest.spyOn:

import * as userUtils from '../utils/userUtils';
import * as roleUtils from '../utils/roleUtils';

const users = [ /* mock users data */ ];
const roles = [ /* mock roles data */ ];
const usersWithRoles = [ /* mock usersWithRoles data */ ];

const mockGetUsers = jest.spyOn(userUtils, 'getUsers');
mockGetUsers.mockResolvedValue(users);

const mockGetRolesWithUsers = jest.spyOn(roleUtils, 'getRolesWithUsers');
mockGetRolesWithUsers.mockResolvedValue(usersWithRoles);

const mockGetRoles = jest.spyOn(roleUtils, 'getRoles');
mockGetRoles.mockResolvedValue(roles);

---

Y otra opción es simular automáticamente los módulos:

import * as userUtils from '../utils/userUtils';
import * as roleUtils from '../utils/roleUtils';

jest.mock('../utils/userUtils');
jest.mock('../utils/roleUtils');

const users = [ /* mock users data */ ];
const roles = [ /* mock roles data */ ];
const usersWithRoles = [ /* mock usersWithRoles data */ ];

userUtils.getUsers.mockResolvedValue(users);
roleUtils.getRolesWithUsers.mockResolvedValue(usersWithRoles);
roleUtils.getRoles.mockResolvedValue(roles);

… y agregue la respuesta simulada a las funciones simuladas vacías.

Sección de Reseñas y Valoraciones

Si te gusta la informática, eres capaz de dejar un artículo acerca de qué le añadirías a este tutorial.

---

---

Utiliza Nuestro Buscador