Al desarrollar aplicaciones web, a menudo es necesario interactuar con APIs para intercambiar datos. Sin embargo, durante la etapa de desarrollo, no siempre se dispone de un backend funcional. Para resolverlo, se puede hacer mocking de la API, lo que permite simular respuestas del servidor sin depender de un entorno real. En este artículo, exploraremos qué es MSWJS, para qué sirve y cómo implementarlo con ejemplos en un proyecto JavaScript.

¿Qué es MSWJS y para qué sirve?

MSWJS (Mock Service Worker) es una librería que hace precisamente esto, interceptar las peticiones de red en el navegador y devolver respuestas simuladas. Con ella, puedes:

• Simular endpoints de una API para desarrollar y probar funcionalidades sin esperar al backend.
• Definir distintos escenarios de respuesta, tanto exitosos como con errores.
• Crear un entorno de pruebas más controlado y predecible.

Esta herramienta es especialmente útil cuando no se quiere conectar directamente con el backend, ya sea porqué aún está en desarrollo o porqué no se quiere conectar directamente con un entorno de producción. O simplemente para evaluar cómo responde la aplicación ante distintos estados de la API.

¿Por qué hacer mocks en local en modo desarrollador?

Simular respuestas de una API en la etapa de desarrollo tiene varias ventajas:

• Desarrollo independiente: El frontend no queda bloqueado por la falta de un backend.
• Pruebas específicas: Se pueden evaluar distintos casos sin modificar el servidor real.
• Mayor velocidad: Evita esperas innecesarias en las respuestas del backend.
• Entorno estable: Garantiza que las pruebas unitarias y de integración sean consistentes.

Con una herramienta como MSWJS, el proceso de desarrollo se vuelve más ágil, reduce dependencias, permite detectar errores antes de llegar a producción y probar con distintas respuestas si salir del entorno local.

Ejemplo práctico de MSWJS en un proyecto Vue

Para el ejemplo de integración podemos usar cualquier framework. Usaremos Vue y Vite porqué se ve claramente los pasos a seguir, pero sirve para cualquier otro framework.

Crear un proyecto Vue con Vite:

npm create vite@latest vue-msw --template vue
cd vue-msw
npm install

Instalar Axios y MSWJS

Axios servirá para hacer peticiones get, aunque también podríamos usar el método nativo fetch():

npm install axios
npm install msw@latest --save-dev

Inicializar el Service Worker de MSWJS

Para que el service worker funcione correctamente, necesitamos copiar el archivo mockServiceWorker.js en el directorio public/ de nuestro proyecto. Ejecutamos:

npx msw init public/ --save

Este comando también modificará el package.json

"msw": {
  "workerDirectory": [
    "public"
  ]
}

y generará el archivo en public/mockServiceWorker.js, que será utilizado por el navegador para interceptar las peticiones en un Service Worker.

Configurar MSWJS

Ahora organizamos la configuración en la carpeta mocks.

mkdir src/mocks

Dentro de esta carpeta, creamos:

• src/mocks/handlers.js (definición de las respuestas simuladas)
• src/mocks/browser.js (configuración del worker en el navegador)

Contenido de handlers.js

Aquí añadiremos el endpoint o ruta a reemplazar por la respuesta que queramos. En este caso toda petición get que contenga /api/users devolveremos una respuesta propia:

import { http } from 'msw';

export const handlers = [
  http.get('/api/users', () => {
    return HttpResponse.json([
      { id: 1, name: 'Michael Knight', email: '[email protected]' },
      { id: 2, name: 'Jefferson Franklin', email: '[email protected]' },
    ])
  }),
];

Contenido de browser.js

Archivo de configuración del worker.

import { setupWorker } from 'msw/browser'
import { handlers } from './handlers';

// Creamos un worker con los handlers definidos
export const worker = setupWorker(...handlers);

Insertar mocks cuando estemos en modo desarrollo

Configuramos Vue para que al cargar inicie el serviceWorker.

import { createApp } from 'vue';
import App from './App.vue';

if (import.meta.env.MODE === 'development') {
  import('./mocks/browser')
    .then(({ worker }) => worker.start())
}

createApp(App).mount('#app');

Hacer petición GET con Axios

En App.vue reemplazamos el componente por uno propio para que haga una petición get a la api. Es el ejemplo que mostraremos por pantalla:

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const users = ref([]);

onMounted(async () => {
  try {
    const response = await axios.get('/api/users');
    users.value = response.data;
  } catch (error) {
    console.error('Error al obtener usuarios:', error);
  }
});
</script>

<template>
  <div>
    <h1>Usuarios Mockeados</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
  </div>
</template>

Ahorar ya podemos iniciar el servidor con el comando npm run dev. Si todo ha ido bien, podemos acceder a http://localhost:5173/ y ver una lista con los usuarios mockeados.

Además si abrimos la consola de Chrome veremos el mensaje [MSW] Mocking enabled..

Conclusión

El API mocking es una práctica muy útil en el desarrollo de aplicaciones web, ya que permite simular la interacción con un backend. MSWJS ofrece una forma sencilla de interceptar peticiones y devolver respuestas personalizadas, facilitando el trabajo en el entorno de desarrollo y permitiendo probar distintos escenarios sin depender de un servidor real. Integrar MSWJS en tu flujo de trabajo puede ayudarte a mejorar el control de pruebas y a detectar errores antes de que se conviertan en problemas en producción.