Skip to content
Learni
Voir tous les tutoriels
Tests & Qualité

Comment intégrer MSW pour mocker vos APIs en 2026

14 minINTERMEDIATE
TestingMSWMock
Read in English

Introduction

MSW (Mock Service Worker) permet d'intercepter les requêtes réseau au niveau du navigateur ou de Node.js sans modifier votre code applicatif. Cette approche offre des tests plus réalistes que les mocks de bibliothèques. En 2026, MSW est devenu indispensable pour les équipes qui veulent garantir la fiabilité de leurs intégrations API. Ce tutoriel intermédiaire vous guide pas à pas dans une configuration professionnelle.

Prérequis

  • Node.js 20+
  • Connaissances de base en TypeScript et tests (Vitest ou Jest)
  • Un projet React ou Next.js existant

Installation de MSW

terminal
npm install msw --save-dev
npx msw init ./public

Cette commande installe MSW et génère le fichier worker dans le dossier public pour l'interception navigateur.

Création des handlers

src/mocks/handlers.ts
import { http, HttpResponse } from 'msw';

export const handlers = [
  http.get('/api/users', () => {
    return HttpResponse.json([
      { id: 1, name: 'Alice' },
      { id: 2, name: 'Bob' }
    ]);
  }),
  http.post('/api/users', async ({ request }) => {
    const newUser = await request.json();
    return HttpResponse.json(newUser, { status: 201 });
  }),
];

Les handlers définissent les réponses mockées. Ils sont réutilisables entre tests et environnement de développement.

Configuration du worker navigateur

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

export const worker = setupWorker(...handlers);

Ce fichier initialise le Service Worker qui interceptera les requêtes dans le navigateur pendant le développement.

Configuration serveur pour tests

src/mocks/server.ts
import { setupServer } from 'msw/node';
import { handlers } from './handlers';

export const server = setupServer(...handlers);

La version Node permet d'utiliser les mêmes handlers dans les tests Jest ou Vitest sans navigateur.

Intégration dans les tests

src/__tests__/users.test.ts
import { server } from '../mocks/server';
import { http, HttpResponse } from 'msw';

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test('récupère la liste des utilisateurs', async () => {
  const res = await fetch('/api/users');
  const data = await res.json();
  expect(data).toHaveLength(2);
});

Le cycle listen/reset/close garantit un environnement propre entre chaque test.

Bonnes pratiques

  • Centralisez tous les handlers dans un seul fichier pour faciliter la maintenance
  • Utilisez des scénarios dynamiques avec des variables d'environnement
  • Évitez les mocks trop génériques qui masquent les vrais contrats d'API
  • Documentez chaque handler avec les statuts d'erreur possibles
  • Combinez MSW avec des outils comme MSW Data pour générer des données réalistes

Erreurs courantes à éviter

  • Oublier d'appeler server.resetHandlers() entre les tests
  • Définir des handlers avec des URL absolues au lieu de relatives
  • Ne pas gérer les erreurs réseau (status 500) dans les scénarios de test
  • Laisser le worker actif en production

Pour aller plus loin

Découvrez nos formations avancées sur les tests modernes et le mocking professionnel sur Learni Group.

Comment intégrer MSW pour mocker vos APIs en 2026 | Learni