React Academy · Lezione

Test di UI asincrone e chiamate API con MSW

Simuli le richieste HTTP con Mock Service Worker per testare i componenti che recuperano dati.

Test di UI asincrone e chiamate API con MSW è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Perché utilizzare Mock Service Worker

MSW intercetta le richieste HTTP a livello di rete utilizzando un Service Worker (nel browser) o un intercettore http (in Node), consentendo di simulare le API senza modificare il codice dell'applicazione.

Installare MSW

Installi MSW e configuri l'intercettore Node per i test Jest/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' }]);
  }),
];

Configurare il mock server

Crei un'istanza di setupServer con i propri handler e chiami server.listen() prima dei test, server.resetHandlers() dopo ogni test e server.close() al termine di tutti i test.

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

const server = setupServer(...handlers);

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

Testare un componente che esegue il fetch

Esegua il rendering del componente che attiva un fetch. MSW intercetta la richiesta e restituisce dati simulati. Verifichi ciò che l'utente vede dopo il caricamento dei dati.

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

Query findBy per interfacce asincrone

Le query findBy restituiscono una promise che si risolve quando compare l'elemento (con un timeout predefinito fino a 1 secondo). Le utilizzi per i contenuti che compaiono dopo operazioni asincrone.

// 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();
});

Sovrascrivere gli handler per singolo test

Utilizzi server.use() all'interno di un test per aggiungere un handler temporaneo che sovrascrive quello predefinito solo per quel 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();
});

Testare gli stati di caricamento

Verifichi l'indicatore di caricamento subito dopo il rendering (in modo sincrono), prima che arrivino i dati asincroni.

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

Test delle richieste POST

Definisca un gestore POST che convalidi il corpo della richiesta e restituisca una risorsa creata. Verifichi che il componente rifletta lo stato di successo.

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();
});

Ritardi di rete per test realistici

Aggiunga ritardi artificiali ai gestori per testare più a fondo l'interfaccia di caricamento, utilizzando l'utilità delay di MSW.

import { delay } from 'msw';

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

Test con React Query

Racchiuda il componente in un QueryClientProvider nuovo per ogni test, per evitare che lo stato venga condiviso tra i test.

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

Verifica dei dati della richiesta

Utilizzi uno spy per le richieste all'interno di un gestore per verificare che l'applicazione abbia inviato il corpo o le intestazioni corretti.

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 nel browser per lo sviluppo

MSW funziona anche nel browser durante lo sviluppo. Esegua npx msw init public/ per installare il service worker e importi i gestori in main.tsx per ottenere un'API simulata durante lo sviluppo locale.

Verifica rapida

Quale tipo di query di RTL dovrebbe utilizzare per verificare un contenuto che appare dopo la risoluzione di una chiamata API?

Riepilogo

MSW intercetta le vere richieste HTTP, rendendo i test realistici senza contattare un server attivo. Utilizzi server.use() per sovrascrivere i gestori per ogni test, findBy per le verifiche asincrone e racchiuda i test di React Query in un QueryClientProvider nuovo.

Domande Frequenti

La lezione «Test di UI asincrone e chiamate API con MSW» è gratuita?

Sì — il testo completo di «Test di UI asincrone e chiamate API con MSW» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Test di UI asincrone e chiamate API con MSW»?

Simuli le richieste HTTP con Mock Service Worker per testare i componenti che recuperano dati. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Test di UI asincrone e chiamate API con MSW»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Integration testing con React Testing Library
Test di UI asincrone e chiamate API con MSW
Introduzione a Playwright per React
Test end-to-end di form e flussi utente

← Torna a React Academy