Installation de msw pour travailler avec la partie serveur dans Redux

Lors des leçons précédentes, nous avons apporté plusieurs modifications supplémentaires à notre application. Maintenant, nous devons comprendre le serveur avec lequel notre application échangera des données.

Nous n'aurons pas de vrai serveur, donc nous allons simplement simuler le travail avec lui en utilisant un outil génial : Mock Service Worker. Mock Service Worker (MSW) est un outil pour simuler des API, qui utilise une API standardisée Service Worker, conçue pour intercepter les requêtes au niveau réseau. MSW générera des réponses fictives (responses) à nos requêtes (requests). De plus, comme le disent les développeurs, l'outil est si efficace et flexible qu'après le débogage avec les mocks (pour lesquels rien de spécial n'est requis dans l'application), l'application peut être mise en production avec un vrai serveur externe. La documentation est assez vaste, et si vous vous intéressez à MSW, vous pouvez la lire sur le site officiel.

Passons à l'installation de msw. Pour cela, ouvrons notre projet avec les produits et dans le terminal, tapons :

npm install msw --save-dev

Pour que msw fonctionne, nous devons également créer et copier mockServiceWorker.js dans un répertoire public. Souvent, c'est le dossier public. Nous avons un dossier vide public, copions le fichier dedans. Pour cela, lancez dans le terminal la commande et acceptez ensuite l'utilisation de public :

npx msw init public

Maintenant, regardons dans public, le script généré mockServiceWorker.js devrait y apparaître. Maintenant, lançons notre application avec les produits et dans la barre d'adresse du navigateur, tapons http://localhost:5173/mockServiceWorker.js (puisque notre application fonctionne sur le port 5173). Vous voyez dans la fenêtre du navigateur le contenu du fichier mockServiceWorker.js s'afficher ? C'est formidable, continuons.

Ensuite, créons dans le dossier src un dossier api, et dedans un fichier server.js, dans lequel nous écrirons le code du serveur. Maintenant, ouvrons server.js et importons-y la fonction setupWorker de la bibliothèque msw installée :

import { setupWorker } from 'msw/browser'

Ci-dessous dans le fichier, créons la variable worker et exportons-la :

export const worker = setupWorker()

Et maintenant, ouvrons le fichier main.jsx et importons-y notre worker :

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

Maintenant, connectons-le à notre application. Pour cela, le code avec lequel nous créons la racine de notre application React, nous allons l'envelopper dans une fonction, appelons-la main et ajoutons-y en première ligne la fonction de démarrage pour le worker. Bien sûr, n'oublions pas d'appeler main elle-même. Le code complet après toutes les lignes d'importation ressemblera maintenant à ceci :

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

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

main()

Maintenant, nous sommes sûrs que notre application ne commencera pas à fonctionner avant (et n'enverra pas de requêtes ;) ), que le worker ne soit démarré.

Lançons notre application et ouvrons dans le navigateur la console pour les développeurs. Si vous y voyez le texte '[MSW] Mocking enabled.', alors vous avez bien travaillé et tout est installé correctement !!!

Ouvrez votre application avec les étudiants. Après avoir pris connaissance du contenu de cette leçon, installez Mock Service Worker pour votre application.

Créez le fichier server.js, et dedans créez un worker. Attachez le worker à l'application dans main.js, comme montré dans la leçon. Assurez-vous que tout fonctionne.