0Pricing
React Academy · Leçon

Tester l’interface asynchrone et les appels d’API avec MSW

Simulez les requêtes HTTP avec Mock Service Worker pour tester les composants qui récupèrent des données.

Tester l’interface asynchrone et les appels d’API avec MSW est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Pourquoi Mock Service Worker ?

MSW intercepte les requêtes HTTP au niveau du réseau à l’aide d’un service worker dans le navigateur ou d’un intercepteur http dans Node, ce qui vous permet de simuler les API sans modifier le code de votre application.

Installer MSW

Installez MSW et configurez l’intercepteur Node pour les tests Jest et Vitest.

// npm install msw --save-dev

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

export const handlers = [
  http.get('/api/users', () => {
    return HttpResponse.json([{ id: 1, name: 'Alice' }]);
  }),
];

Configurer le serveur simulé

Créez une instance de setupServer avec vos gestionnaires et appelez server.listen() avant les tests, server.resetHandlers() après chaque test et server.close() après tous les tests.

import { setupServer } from 'msw/node';
import { handlers } from './handlers';

const server = setupServer(...handlers);

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

Tester un composant qui effectue une requête

Affichez le composant qui déclenche une requête. MSW intercepte la requête et renvoie des données simulées. Vérifiez ce que l’utilisateur voit une fois les données chargées.

test('shows user list after fetch', async () => {
  render(<UserList />);
  expect(screen.getByText('Loading...')).toBeInTheDocument();
  expect(await screen.findByText('Alice')).toBeInTheDocument();
});

Requêtes findBy pour une interface asynchrone

Les requêtes findBy renvoient une promesse qui se résout lorsque l’élément apparaît, avec un délai d’expiration maximal d’une seconde par défaut. Utilisez-les pour le contenu qui apparaît après des opérations asynchrones.

// findByText waits for the element to appear
const username = await screen.findByText('Alice');
expect(username).toBeInTheDocument();

// waitFor wraps assertions that need to wait
await waitFor(() => {
  expect(screen.getByText('3 users')).toBeInTheDocument();
});

Remplacer les gestionnaires pour chaque test

Utilisez server.use() dans un test pour ajouter un gestionnaire ponctuel qui remplace la valeur par défaut uniquement pour ce test.

test('shows error on API failure', async () => {
  server.use(
    http.get('/api/users', () => {
      return HttpResponse.json({ message: 'Server error' }, { status: 500 });
    })
  );

  render(<UserList />);
  expect(await screen.findByText('Failed to load users')).toBeInTheDocument();
});

Tester les états de chargement

Vérifiez l’indicateur de chargement immédiatement après le rendu, de manière synchrone, avant l’arrivée des données asynchrones.

test('shows loading state initially', () => {
  render(<UserList />);
  expect(screen.getByRole('progressbar')).toBeInTheDocument();
  // or
  expect(screen.getByText('Loading...')).toBeInTheDocument();
});

Tester les requêtes POST

Définissez un gestionnaire POST qui valide le corps de la requête et renvoie une ressource créée. Vérifiez que le composant reflète l’état de réussite.

server.use(
  http.post('/api/users', async ({ request }) => {
    const body = await request.json();
    return HttpResponse.json({ id: 2, ...body }, { status: 201 });
  })
);

test('creates a user', async () => {
  const user = userEvent.setup();
  render(<NewUserForm />);
  await user.type(screen.getByLabelText('Name'), 'Bob');
  await user.click(screen.getByRole('button', { name: /create/i }));
  expect(await screen.findByText('User created!')).toBeInTheDocument();
});

Délais réseau pour des tests réalistes

Ajoutez des délais artificiels aux gestionnaires afin de tester plus rigoureusement l’interface de chargement, en utilisant l’utilitaire delay de MSW.

import { delay } from 'msw';

http.get('/api/users', async () => {
  await delay(200);
  return HttpResponse.json([{ id: 1, name: 'Alice' }]);
})

Tester avec React Query

Enveloppez le composant dans un nouveau QueryClientProvider pour chaque test afin d’empêcher les fuites d’état entre les tests.

function renderWithQuery(ui: React.ReactElement) {
  const queryClient = new QueryClient({
    defaultOptions: { queries: { retry: false } },
  });
  return render(
    <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>
  );
}

Vérifier les données de requête

Utilisez un espion de requête dans un gestionnaire pour vérifier que l’application a envoyé le corps ou les en-têtes de requête corrects.

let capturedBody: unknown;

server.use(
  http.post('/api/login', async ({ request }) => {
    capturedBody = await request.json();
    return HttpResponse.json({ token: 'abc' });
  })
);

test('sends credentials to API', async () => {
  // ... submit form ...
  expect(capturedBody).toEqual({ email: 'a@b.com', password: 'pass' });
});

MSW dans le navigateur pour le développement

MSW fonctionne également dans le navigateur pendant le développement. Exécutez npx msw init public/ pour installer le service worker et importez vos gestionnaires dans main.tsx afin de disposer d’une API simulée pendant le développement local.

Vérification rapide

Quel type de requête RTL devez-vous utiliser pour vérifier un contenu qui apparaît après la résolution d’un appel API ?

Récapitulatif

MSW intercepte les requêtes HTTP réelles, ce qui rend les tests réalistes sans contacter un serveur actif. Utilisez server.use() pour remplacer les gestionnaires pour chaque test, findBy pour les vérifications asynchrones, et enveloppez les tests React Query dans un nouveau QueryClientProvider.

Questions Fréquemment Posées

La leçon « Tester l’interface asynchrone et les appels d’API avec MSW » est-elle gratuite ?

Oui — le texte complet de « Tester l’interface asynchrone et les appels d’API avec MSW » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Tester l’interface asynchrone et les appels d’API avec MSW » ?

Simulez les requêtes HTTP avec Mock Service Worker pour tester les composants qui récupèrent des données. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Tester l’interface asynchrone et les appels d’API avec MSW » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Tests d’intégration avec React Testing Library
  2. Tester l’interface asynchrone et les appels d’API avec MSW
  3. Premiers pas avec Playwright pour React
  4. Tester les formulaires et les parcours utilisateur de bout en bout
← Retour à React Academy