@testing-library/react: render e userEvent
Renderizzare i componenti in un DOM simulato, eseguire query per ruolo e testo dell’etichetta, simulare le interazioni dell’utente con userEvent e verificare l’output visibile.
@testing-library/react: render e userEvent è una lezione Frontend 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 Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Filosofia di Testing Library
@testing-library incoraggia test che rispecchiano il modo in cui gli utenti interagiscono con l'interfaccia. Esegua le query in base a ruolo, etichetta e testo, non in base a dettagli di implementazione come i nomi delle classi CSS o gli elementi interni dei componenti.
Installazione di Testing Library
Installi Testing Library per React e il pacchetto userEvent per simulare le interazioni dell'utente.
npm install -D @testing-library/react @testing-library/user-event @testing-library/jest-domrender() — Montare un componente
render(<Component />) monta il componente in un DOM simulato. Restituisce funzioni di query per individuare gli elementi.
import { render, screen } from '@testing-library/react';
import { Button } from './Button';
test('renders button with label', () => {
render(<Button label="Submit" onClick={() => {}} />);
expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
});Esecuzione delle query sugli elementi
Preferisca le query nel seguente ordine: getByRole (accessibile), getByLabelText, getByPlaceholderText, getByText, getByDisplayValue. Utilizzi queryBy* per verificare la non esistenza di un elemento. Utilizzi findBy* per gli elementi asincroni.
// Prefer (accessible):
screen.getByRole('button', { name: /submit/i });
screen.getByLabelText('Email');
// For text content:
screen.getByText('Welcome!');
// Existence check:
expect(screen.queryByText('Error')).not.toBeInTheDocument();
// Async appearance:
await screen.findByText('Data loaded');userEvent — Simulare le azioni dell'utente
userEvent simula le interazioni reali dell'utente: digitazione, clic e navigazione tramite tastiera. È più realistico del precedente fireEvent.
import userEvent from '@testing-library/user-event';
test('typing in input', async () => {
const user = userEvent.setup();
render(<SearchInput />);
const input = screen.getByRole('textbox', { name: /search/i });
await user.type(input, 'react hooks');
expect(input).toHaveValue('react hooks');
});Test dell'invio di un modulo
Compili i campi del modulo e lo invii. Verifichi il risultato, ovvero ciò che l'utente vede dopo l'invio.
test('submitting the login form', async () => {
const onLogin = jest.fn();
const user = userEvent.setup();
render(<LoginForm onLogin={onLogin} />);
await user.type(screen.getByLabelText('Email'), 'alice@example.com');
await user.type(screen.getByLabelText('Password'), 'secret123');
await user.click(screen.getByRole('button', { name: /sign in/i }));
expect(onLogin).toHaveBeenCalledWith({ email: 'alice@example.com', password: 'secret123' });
});Matcher personalizzati di jest-dom
@testing-library/jest-dom aggiunge utili matcher: toBeInTheDocument(), toBeVisible(), toBeDisabled(), toHaveValue(), toHaveClass(), toHaveFocus().
Test degli aggiornamenti asincroni dei componenti
Utilizzi waitFor() o le query findBy* per gli elementi che compaiono in modo asincrono, ad esempio dopo un fetch o un timeout.
test('shows data after loading', async () => {
render(<UserList />);
expect(screen.getByRole('status')).toHaveTextContent('Loading');
const items = await screen.findAllByRole('listitem');
expect(items).toHaveLength(3);
});Test degli stati di caricamento e di errore
Simuli la risposta di fetch per testare stati diversi. MSW (Mock Service Worker) è lo strumento migliore per simulare le risposte API nei test.
Test dell'accessibilità
Testing Library incoraggia naturalmente l'accessibilità: se non riesce a individuare un elemento tramite ruolo o etichetta, probabilmente non è accessibile. Utilizzi jest-axe per audit automatizzati dell'accessibilità nei test.
Non testi i dettagli di implementazione
Eviti di: eseguire query sui nomi delle classi CSS, importare lo stato interno dei componenti e verificare che siano stati chiamati metodi specifici. Testi il comportamento dal punto di vista dell'utente: ciò che vede e ciò che accade quando interagisce.
Verifica rapida
Quale funzione di query di Testing Library dovrebbe preferire per individuare gli elementi interattivi?
Riepilogo: @testing-library/react
render() monta i componenti in un DOM simulato. Esegua le query in base a ruolo, etichetta e testo, non in base ai dettagli di implementazione. Utilizzi userEvent.setup() per interazioni realistiche dell'utente. Utilizzi findBy* per gli elementi asincroni. Utilizzi jest-dom per asserzioni leggibili. Testi dal punto di vista dell'utente: ciò che vede e ciò che fa. I componenti accessibili sono più facili da testare.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 41
- Lezioni
- 163
Domande Frequenti
La lezione «@testing-library/react: render e userEvent» è gratuita?
Sì — il testo completo di «@testing-library/react: render e userEvent» è 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 Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «@testing-library/react: render e userEvent»?
Renderizzare i componenti in un DOM simulato, eseguire query per ruolo e testo dell’etichetta, simulare le interazioni dell’utente con userEvent e verificare l’output visibile. Eserciti Frontend 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 Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend 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 «@testing-library/react: render e userEvent»?
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 Frontend Academy?
Sì. Ogni lezione Frontend 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
- Configurazione di Jest e test di base
- @testing-library/react: render e userEvent
- @testing-library/vue: montare i componenti
- Mock dei moduli e delle chiamate API