Instalación de MSW para trabajar con el backend en Redux

En lecciones anteriores hicimos varios cambios adicionales en nuestra aplicación. Ahora necesitamos entender el servidor con el que nuestra aplicación intercambiará datos.

No tendremos un servidor real, por lo que simularemos trabajar con él usando una herramienta genial Mock Service Worker. Mock Service Worker (MSW) es una herramienta para simular API que utiliza una API estandarizada de Service Worker, diseñada para interceptar solicitudes a nivel de red. MSW generará respuestas falsas (responses) a nuestras solicitudes (requests). Además, como afirman los desarrolladores, la herramienta es tan efectiva y flexible que después de depurar con mocks (para los cuales no se requiere crear nada especial en la aplicación), la aplicación puede ponerse en funcionamiento con un servidor externo real. La documentación es bastante extensa y, si te interesa MSW, puedes leerla en el sitio web oficial.

Pasemos a instalar msw. Para ello abriremos nuestro proyecto de productos y en la terminal introduciremos:

npm install msw --save-dev

Para que msw funcione también necesitamos crear y copiar mockServiceWorker.js en algún directorio público. A menudo es la carpeta public. Nosotros tenemos una carpeta vacía public, copiemos el archivo allí. Para ello ejecuta en la terminal el comando y luego acepta el uso de public:

npx msw init public

Ahora echemos un vistazo a public, allí debería aparecer el script generado mockServiceWorker.js. Ahora ejecutemos nuestra aplicación de productos y en la barra de direcciones del navegador introduzcamos http://localhost:5173/mockServiceWorker.js (ya que nuestra aplicación funciona en el puerto 5173). ¿Ves que en la ventana del navegador se muestra el contenido del archivo mockServiceWorker.js? Entonces todo está genial, sigamos adelante.

A continuación, creemos en la carpeta src una carpeta api, y dentro de ella un archivo server.js, donde escribiremos el código del servidor. Ahora abramos server.js e importemos en él la función setupWorker de la biblioteca msw instalada:

import { setupWorker } from 'msw/browser'

Más abajo en el archivo crearemos la variable worker y la exportaremos:

export const worker = setupWorker()

Y ahora abramos el archivo main.jsx e importemos nuestro worker:

import { worker } from './api/server'

Ahora conectémoslo a nuestra aplicación. Para ello, envolveremos el código con el que creamos la raíz de nuestra aplicación React en una función, la llamaremos main y en la primera línea añadiremos la función de inicio para el worker. Por supuesto, no olvidemos llamar a la propia main. El código completo después de todas las líneas de importación ahora se verá así:

async function main() {
	await worker.start({ onUnhandledRequest: 'bypass' })

	ReactDOM.createRoot(document.getElementById('root')).render(
		<React.StrictMode>
			<Provider store={store}>
				<App />
			</Provider>
		</React.StrictMode>
	)
}

main()

Ahora estamos seguros de que nuestra aplicación no comenzará a funcionar antes (y enviará solicitudes ;) ), de que se inicie el worker.

Ejecutemos nuestra aplicación y abramos en el navegador la consola para desarrolladores. Si ves en ella el texto '[MSW] Mocking enabled.', ¡¡¡entonces hiciste un gran trabajo y lo instalaste todo correctamente!!!

Abre tu aplicación de estudiantes. Habiendo revisado el material de esta lección, instala Mock Service Worker para tu aplicación.

Crea un archivo server.js, y en él crea un worker. Conecta el worker a la aplicación en main.js, como se muestra en la lección. Asegúrate de que todo funcione.