Qué es un Mock Server y por qué deberías usarlo en tus pruebas React

En este artículo, aprenderemos qué es un Mock Server y cómo podemos usarlo con React, para simular la comunicación entre el frontend y el backend. Además, conoceremos algunas de las librerías más usada para crear un Mock Server. Por último, desarrollaremos un caso práctico usando Jest, React Testing Library y un Mock Server.

Qué es un Mock Server

Un Mock Server es una simulación de un servidor real. Podemos verlo como un actor de doblaje — se encarga de sustituir al actor principal en diferentes escenas. Donde nuestro actor principal es el servidor real y actor de doblaje es nuestro mock server. 

Para dejarlo más claro, veamos la figura 1.

El flujo es el siguiente:

1. La película necesitar filmar una escena riesgosa.
2. Se hace llamado para la filmación de la escena.
3. El actor de doblaje ejecuta la escena en lugar del actor principal.
4. Finaliza la grabación de la escena con el actor de doblaje.
5. La película guarda y edita para que la escena se vea como si el actor principal la hubiera ejecutado.

Cómo funciona un Mock Server

Para entender cómo funciona, veamos la figura 2. 

Nuestro aplicación frontend hace una petición a la url “/users”, para crear un usuario. En lugar de llegar directamente al servidor real, existe un mecanismo intermedio entre nuestro frontend y el backend que, intercepta las peticiones y simula la respuesta. Esto permite que el frontend se trabaje de forma aislada sin depender de otros servicios.

Entonces, un mock server se compone de tres cosas:

1. Un servidor simulado.
2. Mecanismo para interceptar solicitudes.
3. Definición de respuestas controladas.

Qué librerías de Mock Server existen

En el mercado, ya existen librerías de terceros encargadas de crear un mock server de forma sencilla. Sin embargo, cada una de ellas resuelve el problema de un mock server desde una perspectiva diferente. A continuación listaremos algunas de estas herramientas.

Mock Service Worker (MSW)

Mock Service Worker es una librería para simular peticiones a nuestra API, tanto para el navegador como para Node.

Si quieres como trabajar MSW con Jest y React Testing React para probar tus componentes, te recomiendo mi artículo: Cómo usar Mock Service Worker para simular las llamadas a tu API

Nock

Nock es otra librería para simular peticiones a nuestra API, pero únicamente funciona en un entorno Node.

Te dejo el enlace por si quieres aprender más sobre como utilizarlo con Jest, React Testing Library: Cómo simular tu API en React con Nock y Jest para mejorar tus pruebas

Por qué debería usar un Mock Server en mis aplicaciones React

Las aplicaciones React cada día se han vuelto más dinámicas, por lo que la comunicación con el backend se hace más constante. A continuación se listan algunos puntos importantes de porque debería usar un Mock Server.

• Facilita sustituir las respuestas.
• Es rápido de ejecutar.
• Evita preocuparse por conocer la lógica de negocio del backend.
• Permite enfocarnos únicamente en la funcionalidad del frontend.
• Asila los errores, si falla sabes que fue el frontend no el backend.
• Permite simular escenarios complejos.
• Evita depender de un estado en la base de datos.
• Mejora la velocidad de desarrollo.
• Evita hacer uso de más hardware.
• Si el backend se comunica con un servicio de terceros de paga, se evita que los costos incrementes.

Conclusión

Un mock server es de gran utilidad cuando no queremos depender de configurar nuestro backend localmente. Permite simular las respuestas dependiendo el contexto de nuestra aplicación. Además, en aplicaciones React facilita el desarrollo y puede hasta evitar que los costos al comunicarse con un servicio tercero aumenten.

Si quieres seguir profundizando sobre como probar tus componentes te recomiendo mi HUB: Testing en React, donde encontrarás todo lo necesario para adentrarte al mundo de las pruebas.