Testare un componente React con Vitest e Testing Library

Prompt

Agisci come ingegnere della qualità frontend esperto di Testing Library e di test che verificano il comportamento, non i dettagli di implementazione.

Contesto:
- Codice del componente: {{codice_componente}}
- Comportamento da coprire: {{comportamento}}
- Strumenti: {{strumenti}}
- Chiamate di rete: {{rete}}

Se il componente dipende da context, rotte o provider che non compaiono nel codice, chiedimi come vengono montati prima di scrivere i test.

Consegna:
1. Un piano di test in tabella: caso, tipo (rendering, interazione, errore, accessibilità), priorità.
2. Il file di test completo: prima le query per ruolo e nome accessibile (`getByRole`), `userEvent` invece di `fireEvent`, `findBy` per l'asincrono e asserzioni su ciò che vede l'utente.
3. Mock di rete secondo {{rete}}, con un caso di successo, uno di errore e uno di caricamento lento se pertinente.
4. Un helper `renderWithProviders` se servono provider.
5. La configurazione minima se manca: ambiente jsdom o happy-dom, file di setup con i matcher di jest-dom e gli script del package.json.
6. Le lacune di copertura rimaste e perché non conviene coprirle con test unitari (per esempio perché spettano a un test end-to-end).

Vincoli:
- Niente test di snapshot se non motivati.
- Non accedere a stato interno, classi CSS o `data-testid` se esiste una query accessibile.
- Se scrivendo i test scopri un bug o un problema di accessibilità nel componente, segnalamelo a parte; non correggerlo in silenzio.
- Non inventare props o testi assenti dal codice; usa [DA COMPLETARE] se manca qualcosa.

Formato: piano, blocchi di codice con nome del file ed elenco dei comandi da eseguire.

Come usarlo

Esempio d'uso

Esempio di risultato

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 { RiepilogoCarrello } from './RiepilogoCarrello';

const server = setupServer(http.post('/api/pagamento', () => HttpResponse.json({ ok: true }))); // [DA COMPLETARE: endpoint reale]
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

it('ricalcola il totale quando cambia la quantità', async () => {
  const user = userEvent.setup();
  render(<RiepilogoCarrello />);
  const quantita = screen.getByRole('spinbutton', { name: /quantità/i });
  await user.clear(quantita);
  await user.type(quantita, '3');
  expect(screen.getByText(/totale/i)).toHaveTextContent('[DA COMPLETARE: totale atteso]');
});

it('disabilita Paga e mostra un errore se l’API fallisce', async () => {
  server.use(http.post('/api/pagamento', async () => { await delay(100); return new HttpResponse(null, { status: 500 }); }));
  const user = userEvent.setup();
  render(<RiepilogoCarrello />);
  const paga = screen.getByRole('button', { name: /paga/i });
  await user.click(paga);
  expect(paga).toBeDisabled();
  expect(await screen.findByRole('alert')).toBeInTheDocument();
});

Dati chiave

Categoria

Programmazione e sviluppo · React

Tipo di output

Codice

Livello

Intermedio

Pensato per

ChatGPT, Claude, Gemini e Microsoft Copilot

Verificato in

In attesa di verifica editoriale

Variabili

Codice del componente, Comportamento da coprire, Strumenti e Chiamate di rete

Lingua

Italiano

Prezzo

Gratuito, senza registrazione

Aggiornato

07/11/2026

Domande frequenti