Scrivere i test può essere noioso e ripetitivo. Potresti sentirti come se stessi perdendo tempo prezioso che preferiresti utilizzare per lavorare sulle funzionalità. Tuttavia, se desideri inviare applicazioni di cui sei sicuro, dovresti scrivere dei test.
I test ti consentono di rilevare errori e bug che altrimenti potresti finire per spedire agli utenti. Pertanto, migliora l'esperienza utente della tua applicazione e ti evita di dover eseguire il debug del codice di produzione.
Puoi facilmente scrivere test in React usando Jest e React Testing Library.
Cosa dovresti testare in risposta?
Decidere cosa testare può essere difficile. Sebbene i test siano ottimi, non dovresti testare ogni riga nella tua applicazione React. Ciò ti lascerà con test fragili che si interrompono con il minimo cambiamento nella tua app.
Invece, dovresti solo testare l'implementazione dell'utente finale. Ciò significa testare come l'utente finale utilizzerà la tua applicazione invece di testare il funzionamento interno della tua app.
Inoltre, assicurati di testare i componenti più utilizzati nella tua applicazione, come la pagina di destinazione o il componente di accesso. Inoltre, verifica le funzionalità più importanti della tua applicazione. Ad esempio, queste possono essere funzionalità che portano denaro, come la funzionalità del carrello degli acquisti.
Quando si decide cosa testare, una cosa da tenere a mente è non testare mai le funzionalità che React gestisce da solo. Ad esempio, invece di testare la validità degli oggetti di scena, puoi utilizzare React PropTypes.
Test di un componente pulsante
Ricorda, dovresti testare solo l'implementazione dell'utente finale di un componente e non il suo funzionamento interno. Per un componente pulsante, ciò significa verificarne il rendering senza arresti anomali e la visualizzazione corretta.
Crea un nuovo file in src cartella chiamata Button.js e aggiungi il codice seguente.
funzionePulsante({valore}) {
Restituzione (
<pulsante>{valore}</button>
)
}
esportarepredefinito Pulsante
Button.js accetta un oggetto chiamato valore e lo usa come valore del pulsante.
Scrivere il tuo primo test
UN applicazione create-react-app viene fornito preinstallato con Jest e la libreria di test React. Jest è una libreria di test leggera con funzioni di simulazione e asserzione integrate. Funziona con molti Framework JavaScript. La React Testing Library, d'altra parte, fornisce funzioni per aiutarti a testare il modo in cui gli utenti interagiscono con i componenti.
Crea un nuovo file chiamato Pulsante.test.js nella cartella src. Per impostazione predefinita, Jest identifica i file con suffisso .test.js come file di test e li esegue automaticamente. Un'altra opzione è aggiungere i file di prova a una cartella chiamata __prove__.
Aggiungi il codice seguente in Button.test.js per creare il primo test.
importare { rendere } da '@libreria-di-test/reagire';
importare Pulsante da '../Pulsante';
descrivere('Componente pulsante', () => {
test('Rende il componente del pulsante senza arresti anomali', () => {
rendere(<Pulsante />);
});
})
Questo test definisce innanzitutto di cosa tratta il test utilizzando il blocco di descrizione fornito da Jest. Questo blocco è utile per raggruppare i test correlati. Qui stai raggruppando i test per il componente Button.
All'interno del blocco di descrizione, hai il primo test nel blocco di test. Questo blocco accetta una stringa che descrive cosa dovrebbe fare il test e una funzione di callback che esegue l'aspettativa.
In questo esempio, il test dovrebbe eseguire il rendering del componente Button senza arrestarsi in modo anomalo. Il metodo di rendering della libreria React Testing esegue il test vero e proprio. Verifica se il componente Button esegue il rendering correttamente. Se lo fa, il test passa, altrimenti fallisce.
Utilizzo dei ruoli per trovare il pulsante
A volte vuoi controllare se l'elemento è stato montato. Il metodo screen ha una funzione getByRole() che puoi usare per catturare un elemento dal DOM.
screen.getByRole('pulsante')
Puoi quindi utilizzare l'elemento che hai afferrato per eseguire test come verificare se esiste nel documento o se è stato visualizzato correttamente.
getByRole() è una delle tante query che puoi utilizzare per selezionare elementi in un componente. Dai un'occhiata ad altri tipi di query in The Libreria di test di reazione Guida "Quale query dovrei usare". Anche a parte il ruolo del "pulsante", la maggior parte elementi semantici HTML hanno ruoli impliciti che puoi usare per eseguire le tue query. Trova l'elenco dei ruoli da documenti MDN.
Aggiungi quanto segue al blocco di test per verificare il rendering del componente.
test('Pulsante di rendering senza arresti anomali', () => {
rendere(<Valore pulsante="Iscrizione" />);
aspetta (screen.getByRole('pulsante')).toBeInTheDocument()
});
Il matcher toBeInTheDocument() controlla se l'elemento button esiste nel documento.
Aspettati che il pulsante sia visualizzato correttamente
Il componente Button accetta un valore prop e lo visualizza. Affinché venga visualizzato correttamente, il valore visualizzato deve essere lo stesso di quello passato.
Crea un nuovo blocco di test e aggiungi il codice seguente.
test('Rende correttamente il pulsante', () => {
rendere(<Valore pulsante="Login" />);
aspetta (screen.getByRole('pulsante')).toHaveTextContent("Login")
})
Tieni presente che non è necessario eseguire le pulizie dopo i test quando si utilizza la libreria React Testing. Nelle versioni precedenti, avresti dovuto eseguire manualmente la pulizia in questo modo:
afterEach (pulizia)
Ora, la libreria di test smonta automaticamente i componenti dopo ogni rendering.
Creazione di istantanee di test
Finora hai testato il comportamento del componente Button. Scrivi test snapshot per verificare se l'output del componente rimane lo stesso.
I test snapshot confrontano l'output corrente con un output memorizzato del componente. Ad esempio, se modifichi lo stile di un componente Button, il test dello snapshot ti avviserà. Puoi aggiornare l'istantanea in modo che corrisponda al componente modificato o annullare le modifiche allo stile.
I test snapshot sono molto utili ogni volta che vuoi assicurarti che l'interfaccia utente non cambi inaspettatamente.
Il test dello snapshot è diverso dagli unit test poiché è necessario disporre già di codice funzionante per creare lo snapshot.
Utilizzerai il metodo renderer del pacchetto react-test-renderer npm. Quindi, esegui il codice seguente per installarlo.
npm installare reagire-test-render
In Button.test.js, scrivi il test dello snapshot come segue:
test('Corrisponde all'istantanea', () => {
albero const = renderer.create(<Valore pulsante="Login" />.toJSON();
aspettare(albero).toMatchSnapshot();
})
Non ci sono snapshot esistenti per il componente Button, quindi l'esecuzione di questo test creerà un file di snapshot insieme al file di test:
Pulsante
└─── __test__
│ │ Pulsante.prove.js
│ └─── __istantanea__
│ │ Pulsante.test.js.affrettato
│
└─── Pulsante.js
Ora, quando esegui il test successivo, React confronterà la nuova istantanea che genera con quella memorizzata.
Scrivi test per i componenti più utilizzati
Questo tutorial ti ha insegnato come scrivere test DOM e snapshot in React testando un componente Button. Scrivere test per tutti i componenti che crei può essere noioso. Tuttavia, questi test consentono di risparmiare il tempo che avresti speso per il debug del codice già distribuito.
Non è necessario ottenere il 100% di copertura dei test, ma assicurati di scrivere i test per i componenti più utilizzati e più importanti.
