React Academy · Lezione

Integration testing con React Testing Library

Esegua il render dei componenti nei test, generi eventi e verifichi l'output visibile, non l'implementazione.

Integration testing con React Testing Library è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 1 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.

Che cos'è React Testing Library

React Testing Library (RTL) incoraggia a eseguire i test dal punto di vista dell'utente: esegua il rendering dei componenti, interagisca con essi come farebbe un utente e verifichi l'output visibile anziché i dettagli di implementazione.

Configurazione

RTL è incluso in Create React App e nel template React di Vite. Per una configurazione manuale, installi @testing-library/react e @testing-library/jest-dom.

// package.json
// "@testing-library/react": "^14.0.0",
// "@testing-library/jest-dom": "^6.0.0"

// setupTests.ts
import '@testing-library/jest-dom';

Eseguire il rendering di un componente

render() monta un componente in un DOM virtuale. Restituisce funzioni di query limitate all'output sottoposto a rendering.

import { render, screen } from '@testing-library/react';
import { Button } from './Button';

test('renders button label', () => {
  render(<Button label="Submit" onClick={() => {}} />);
  expect(screen.getByText('Submit')).toBeInTheDocument();
});

Cercare gli elementi

Preferisca le query in questo ordine: getByRole > getByLabelText > getByPlaceholderText > getByText. Le query basate sui ruoli corrispondono alla semantica dell'accessibilità.

// Best: query by role
const button = screen.getByRole('button', { name: /submit/i });

// Good: query by label (for form inputs)
const input = screen.getByLabelText('Email address');

// Acceptable: query by text
const heading = screen.getByText('Welcome');

Generare eventi

Utilizzi userEvent da @testing-library/user-event (scelta consigliata) oppure fireEvent (di base). userEvent simula le interazioni reali del browser, inclusi focus e blur.

import userEvent from '@testing-library/user-event';

test('types into input', async () => {
  const user = userEvent.setup();
  render(<SearchBar />);
  const input = screen.getByRole('textbox');
  await user.type(input, 'react');
  expect(input).toHaveValue('react');
});

Testare l'invio di un modulo

Esegua il rendering del modulo, compili gli input con userEvent.type, faccia clic su Invia e verifichi il risultato (messaggio di successo, navigazione o chiamata del callback).

test('submits the login form', async () => {
  const onLogin = jest.fn();
  const user = userEvent.setup();
  render(<LoginForm onLogin={onLogin} />);

  await user.type(screen.getByLabelText('Email'), 'test@example.com');
  await user.type(screen.getByLabelText('Password'), 'password123');
  await user.click(screen.getByRole('button', { name: /log in/i }));

  expect(onLogin).toHaveBeenCalledWith({ email: 'test@example.com', password: 'password123' });
});

Verificare la visibilità

I matcher di jest-dom, come toBeInTheDocument(), toBeVisible() e toHaveValue(), rendono le asserzioni più leggibili.

expect(screen.getByText('Error: required')).toBeInTheDocument();
expect(screen.getByRole('dialog')).toBeVisible();
expect(screen.getByRole('textbox')).toHaveValue('hello');
expect(screen.queryByText('Loading...')).not.toBeInTheDocument();

Testare il rendering condizionale

Utilizzi queryBy (restituisce null quando l'elemento è assente) per verificare che un elemento non venga sottoposto a rendering. Utilizzi getBy quando prevede che sia presente.

test('shows error message when validation fails', async () => {
  const user = userEvent.setup();
  render(<SignUpForm />);
  await user.click(screen.getByRole('button', { name: /submit/i }));
  expect(screen.getByText('Email is required')).toBeInTheDocument();
});

Racchiudere i componenti nei provider

La maggior parte dei componenti necessita di un context o di un router. Li racchiuda nei provider all'interno della chiamata a render oppure crei un helper personalizzato renderWithProviders.

function renderWithProviders(ui: React.ReactElement) {
  return render(
    <QueryClientProvider client={new QueryClient()}>
      <MemoryRouter>
        {ui}
      </MemoryRouter>
    </QueryClientProvider>
  );
}

test('shows user data', () => {
  renderWithProviders(<UserProfile />);
});

Testare le modifiche allo state

Interagisca con il componente, quindi verifichi che il nuovo state sia riflesso nell'interfaccia. RTL racchiude automaticamente la maggior parte delle interazioni in act quando si utilizza userEvent.

test('counter increments', async () => {
  const user = userEvent.setup();
  render(<Counter />);
  expect(screen.getByText('Count: 0')).toBeInTheDocument();
  await user.click(screen.getByRole('button', { name: /increment/i }));
  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});

Helper di debug di Screen

Chiami screen.debug() per stampare nella console l'HTML attualmente sottoposto a rendering: è utile quando una query non riesce e deve vedere cosa viene effettivamente visualizzato.

test('debugging a failing query', () => {
  render(<MyComponent />);
  screen.debug(); // prints rendered HTML
  screen.getByRole('button', { name: /save/i }); // then inspect output
});

Verifica rapida

Quale query dovrebbe preferire quando testa un pulsante in React Testing Library?

Riepilogo

RTL esegue il rendering dei componenti e vi interagisce tramite query basate sui ruoli e userEvent. Racchiuda i componenti nei provider richiesti, utilizzi i matcher di jest-dom per asserzioni leggibili e preferisca queryBy quando verifica l'assenza di un elemento.

Domande Frequenti

La lezione «Integration testing con React Testing Library» è gratuita?

Sì — il testo completo di «Integration testing con React Testing Library» è 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 «Integration testing con React Testing Library»?

Esegua il render dei componenti nei test, generi eventi e verifichi l'output visibile, non l'implementazione. 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 1 di 4.

Quanto tempo richiede la lezione «Integration testing con React Testing Library»?

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