Skip to content
Learni
View all tutorials
Tests et Mocks

Comment mocker des APIs avec MSW en 2026

14 minBEGINNER
FrontendTestingMSW

Introduction

Mock Service Worker (MSW) est un outil puissant qui intercepte les requêtes HTTP au niveau du navigateur grâce aux Service Workers. Il permet de simuler des réponses d'API sans modifier votre code applicatif. Idéal pour le développement frontend, les tests et les démonstrations hors-ligne, MSW améliore la productivité en supprimant la dépendance à un backend réel. Ce tutoriel vous apprendra à l'intégrer proprement dans un projet moderne TypeScript.

Prérequis

  • Node.js 18 ou supérieur
  • Connaissances de base en JavaScript/TypeScript
  • Un projet React ou Next.js existant
  • npm ou yarn installé

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. Le worker est essentiel pour intercepter les requêtes dans le 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 routes mockées. Chaque handler correspond à une méthode HTTP et un chemin, et renvoie une réponse simulée réaliste.

Configuration du serveur MSW

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

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

Ce fichier configure le serveur MSW pour les tests Node.js. Il est utilisé dans les environnements de test comme Jest ou Vitest.

Intégration dans l'application

src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

async function enableMocking() {
  if (process.env.NODE_ENV === 'development') {
    const { worker } = await import('./mocks/browser');
    await worker.start();
  }
}

enableMocking().then(() => {
  ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
});

Le worker est démarré uniquement en développement. Cela garantit que les mocks n'interfèrent pas avec les environnements de production.

Exemple de test avec MSW

src/App.test.tsx
import { render, screen } from '@testing-library/react';
import App from './App';
import { server } from './mocks/server';
import { http, HttpResponse } from 'msw';

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

test('affiche la liste des utilisateurs', async () => {
  render(<App />);
  expect(await screen.findByText('Alice')).toBeInTheDocument();
});

Ce test vérifie que l'application consomme correctement les données mockées. Les handlers peuvent être surchargés par test pour des scénarios spécifiques.

Bonnes pratiques

  • Placez vos handlers dans un dossier dédié src/mocks
  • Utilisez HttpResponse pour des réponses typées et réalistes
  • Activez les mocks uniquement en développement
  • Écrivez des tests qui reset les handlers entre chaque cas
  • Documentez les endpoints mockés pour l'équipe

Erreurs courantes à éviter

  • Oublier d'appeler worker.start() ou server.listen()
  • Utiliser des chemins absolus au lieu de chemins relatifs
  • Ne pas réinitialiser les handlers entre les tests
  • Laisser les mocks activés en production

Pour aller plus loin

Explorez les fonctionnalités avancées comme les scénarios dynamiques et l'intégration avec Playwright. Découvrez nos formations Learni.