Guida per Principianti sul Testing con ReactJS

Ciao, futuri sviluppatori React! Sono entusiasta di essere il tuo guida in questo viaggio nel mondo del testing React. Come qualcuno che ha insegnato scienze informatiche per molti anni, ho visto con i miei occhi come il testing possa trasformare un buon sviluppatore in un eccellente. Allora, immergiamoci insieme e sveliamo i segreti del testing React!

Perché il Testing è Importante

Prima di iniziare a codificare, permettimi di condividere una breve storia. Ho avuto uno studente che ha costruito una bellissima app React. Sembrava perfetta... fino a quando non è crashata durante una dimostrazione. È stato allora che ha capito a caro prezzo: l'apparenza inganna, ma i test non mentono. Il testing non è solo per catturare bug; è questione di fiducia. Quando i tuoi test passano, puoi dormire sonni tranquilli sapendo che il tuo codice funziona come previsto.

Create React App: Il Tuo Playground per il Testing

Configurazione dell'Ambiente

Iniziamo creando una nuova applicazione React utilizzando Create React App. Questo strumento configura un progetto React pronto all'uso con il testing già configurato. Apri il tuo terminale e digita:

npx create-react-app my-react-testing-app
cd my-react-testing-app

Complimenti! Hai appena creato la tua prima applicazione React con capacità di testing integrate. È come avere un nuovo giocattolo con le batterie incluse!

Il Tuo Primo Test

Create React App viene con un file di test di esempio. Diamo un'occhiata. Apri src/App.test.js:

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

test('mostra il link per imparare React', () => {
render(<App />);
const linkElement = screen.getByText(/impara react/i);
expect(linkElement).toBeInTheDocument();
});

Spieghiamo questo codice:

1. Importiamo gli strumenti di testing necessari e il nostro componente App.
2. Definiamo un test utilizzando la funzione test.
3. Renderizziamo il nostro componente App.
4. Cerchiamo un elemento con il testo "impara react".
5. Ci aspettiamo che questo elemento sia nel documento.

Per eseguire questo test, usa il comando:

npm test

Se tutto è configurato correttamente, dovresti vedere un test che passa. Complimenti sul tuo primo test React!

Testing in una Applicazione Personalizzata

Ora che abbiamo visto un test di base, creiamo il nostro componente e testiamolo.

Creazione di un Componente Semplice

Creiamo un componente semplice per il contatore. Crea un nuovo file src/Counter.js:

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<p>Contatore: {count}</p>
<button onClick={() => setCount(count + 1)}>Incrementa</button>
</div>
);
}

export default Counter;

Questo componente visualizza un contatore e un pulsante per incrementarlo.

Scrittura dei Test per il Nostro Contatore

Ora, testiamo il nostro componente Counter. Crea un nuovo file src/Counter.test.js:

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

test('mostra il contatore iniziale a 0', () => {
render(<Counter />);
const countElement = screen.getByText(/contatore: 0/i);
expect(countElement).toBeInTheDocument();
});

test('incrementa il contatore quando si clicca il pulsante', () => {
render(<Counter />);
const button = screen.getByText(/incrementa/i);
fireEvent.click(button);
const countElement = screen.getByText(/contatore: 1/i);
expect(countElement).toBeInTheDocument();
});

Spieghiamo questi test:

1. Il primo test verifica se il contatore iniziale è 0.
2. Il secondo test simula un clic sul pulsante e verifica se il contatore aumenta a 1.

Esegui di nuovo npm test, e dovresti vedere questi nuovi test passare!

Concetti di Testing Avanzato

Man mano che diventi più a tuo agio con il testing di base, vorrai esplorare concetti più avanzati. Ecco una tabella di alcuni metodi che userai comunemente nel testing React:

Metodo	Descrizione	Esempio
render	Renderizza un componente React per il testing	render(<MyComponent />)
screen.getByText	Trova un elemento pelo suo contenuto di testo	screen.getByText(/ciao mondo/i)
screen.getByRole	Trova un elemento pelo suo ruolo ARIA	screen.getByRole('button')
fireEvent	Simula eventi DOM	fireEvent.click(button)
waitFor	Aspetta che le aspettative siano soddisfatte	await waitFor(() => expect(element).toBeVisible())
act	Avvolge il codice che causa aggiornamenti dello stato React	act(() => { /* esegui azioni */ })

Testing del Comportamento Asincrono

Le applicazioni React spesso coinvolgono operazioni asincrone. Creiamo un componente che recupera dati e testiamolo:

// UserData.js
import React, { useState, useEffect } from 'react';

function UserData() {
const [userData, setUserData] = useState(null);

useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users/1')
.then(response => response.json())
.then(data => setUserData(data));
}, []);

if (!userData) return <div>Caricamento...</div>;

return <div>Nome Utente: {userData.name}</div>;
}

export default UserData;

Ora, testiamo questo componente:

// UserData.test.js
import { render, screen, waitFor } from '@testing-library/react';
import UserData from './UserData';

test('carica e visualizza i dati dell\'utente', async () => {
render(<UserData />);

expect(screen.getByText(/caricamento/i)).toBeInTheDocument();

await waitFor(() => {
expect(screen.getByText(/nome utente:/i)).toBeInTheDocument();
});
});

Questo test verifica lo stato di caricamento e poi aspetta che i dati dell'utente siano visualizzati.

Conclusione

Il testing in React può sembrare spaventoso all'inizio, ma è una competenza invaluable che ti renderà un migliore sviluppatore. Ricorda, ogni test che scrivi è come una rete di sicurezza per il tuo codice. Ti cattura quando cadono e ti dà la fiducia per salire più in alto.

Mentre continui il tuo viaggio con React, continua a esplorare diverse tecniche di testing. Simula chiamate API, testati gli stati di errore e sfida te stesso a scrivere test prima di scrivere i componenti (Sviluppo Guidato dai Test). Più pratichi, più naturale diventerà.

Buon testing, e possa la tua console essere sempre verde con test che passano!

Credits: Image by storyset