Tester un composant React avec Vitest et Testing Library

Prompt

Agis comme un ingénieur qualité frontend expert de Testing Library et des tests qui vérifient le comportement, pas les détails d'implémentation.

Contexte :
- Code du composant : {{code_composant}}
- Comportement à couvrir : {{comportement}}
- Outils : {{outils}}
- Appels réseau : {{reseau}}

Si le composant dépend de contextes, de routes ou de providers absents du code, demande-moi comment ils sont montés avant d'écrire les tests.

Livrables :
1. Un plan de test en tableau : cas, type (rendu, interaction, erreur, accessibilité), priorité.
2. Le fichier de tests complet : requêtes par rôle et nom accessible d'abord (`getByRole`), `userEvent` plutôt que `fireEvent`, `findBy` pour l'asynchrone et assertions sur ce que voit l'utilisateur.
3. Des mocks réseau selon {{reseau}}, avec un cas de succès, un cas d'erreur et un cas de chargement lent si c'est pertinent.
4. Un helper `renderWithProviders` si des providers sont nécessaires.
5. La configuration minimale si elle manque : environnement jsdom ou happy-dom, fichier de setup avec les matchers jest-dom et scripts du package.json.
6. Les trous de couverture restants et pourquoi il ne vaut pas la peine de les couvrir en test unitaire (par exemple parce qu'ils relèvent d'un test end-to-end).

Contraintes :
- Pas de tests de snapshot sauf justification.
- N'accède ni à l'état interne, ni aux classes CSS, ni aux `data-testid` quand une requête accessible existe.
- Si l'écriture des tests révèle un bug ou un problème d'accessibilité dans le composant, signale-le à part ; ne le corrige pas en silence.
- N'invente ni props ni textes absents du code ; utilise [À COMPLÉTER] si quelque chose manque.

Format : plan, blocs de code avec nom de fichier et liste des commandes à lancer.

Comment l'utiliser

Exemple d'utilisation

Exemple de résultat

import { afterAll, afterEach, beforeAll, expect, it } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { http, HttpResponse, delay } from 'msw';
import { setupServer } from 'msw/node';
import { ResumePanier } from './ResumePanier';

const server = setupServer(http.post('/api/paiement', () => HttpResponse.json({ ok: true }))); // [À COMPLÉTER : vrai endpoint]
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

it('recalcule le total quand la quantité change', async () => {
  const user = userEvent.setup();
  render(<ResumePanier />);
  const quantite = screen.getByRole('spinbutton', { name: /quantité/i });
  await user.clear(quantite);
  await user.type(quantite, '3');
  expect(screen.getByText(/total/i)).toHaveTextContent('[À COMPLÉTER : total attendu]');
});

it('désactive Payer et affiche une erreur si l’API échoue', async () => {
  server.use(http.post('/api/paiement', async () => { await delay(100); return new HttpResponse(null, { status: 500 }); }));
  const user = userEvent.setup();
  render(<ResumePanier />);
  const payer = screen.getByRole('button', { name: /payer/i });
  await user.click(payer);
  expect(payer).toBeDisabled();
  expect(await screen.findByRole('alert')).toBeInTheDocument();
});

Informations clés

Catégorie

Programmation et développement · React

Type de résultat

Code

Niveau

Intermédiaire

Conçu pour

ChatGPT, Claude, Gemini et Microsoft Copilot

Vérifié sur

En attente de vérification éditoriale

Variables

Code du composant, Comportement à couvrir, Outils et Appels réseau

Langue

Français

Prix

Gratuit, sans inscription

Mis à jour

07/11/2026

Questions fréquentes