Testing Front-End con Jest e React Testing Library

Il Testing Front-End è una componente fondamentale nello sviluppo di applicazioni robuste e affidabili. Nel front-end, strumenti come Jest e Testing Library offrono una soluzione potente e intuitiva per testare il comportamento delle applicazioni. In questa guida scopriremo come iniziare con Jest e React Testing Library per scrivere test efficaci per un'applicazione front-end.

Perché fare Testing Front-End?

Il testing del front-end garantisce che:

1. i componenti dell'interfaccia utente funzionino come previsto.
2. le interazioni dell'utente siano correttamente gestite.
3. le applicazioni siano stabili durante gli aggiornamenti o l'aggiunta di nuove funzionalità.

Jest e Testing Library sono una combinazione perfetta per il testing front-end:

• Jest è un framework di test JavaScript che supporta funzionalità come mock, assertion e snapshot testing.
• Testing Library (spesso React Testing Library) si concentra su test che rispecchiano l'esperienza reale degli utenti, interagendo con il DOM.

Installazione e configurazione

Crea un progetto React (se non hai già un'app):

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

Installa Jest e Testing Library (se non sono già inclusi):

npm install --save-dev jest @testing-library/react @testing-library/jest-dom

Jest è già configurato nei progetti creati con Create React App. Se però lavori in un ambiente personalizzato potresti dover aggiungere un file jest.config.js:

module.exports = {
    testEnvironment: 'jsdom',
};

Verifica l'installazione: esegui il comando seguente per assicurarti che Jest funzioni:

npm test

Scrivere il primo test

Creiamo un componente React semplice da testare partendo dal file src/components/Greeting.js:

import React from 'react';
const Greeting = ({ name }) => {
    return (
        <h1>Ciao, {name || 'Ospite'}!</h1>
    );
};
export default Greeting;

Ora creiamo un file di test src/components/Greeting.test.js per il componente.

import React from 'react';
import { render, screen } from '@testing-library/react';
import Greeting from './Greeting';
test('mostra il saluto con il nome passato', () => {
    render(<Greeting name="Mario" />);
    const greetingElement = screen.getByText(/Ciao, Mario!/i);
    expect(greetingElement).toBeInTheDocument();
});
test('mostra il saluto di default quando non viene passato alcun nome', () => {
    render(<Greeting />);
    const greetingElement = screen.getByText(/Ciao, Ospite!/i);
    expect(greetingElement).toBeInTheDocument();
});

Cosa succede qui?

1. render: rende il componente nell'ambiente di test.
2. screen.getByText: cerca un elemento nel DOM virtuale basato sul testo.
3. expect(...).toBeInTheDocument(): verifica che l'elemento esista nel DOM.

Esegui i test con:

npm test

Se tutto funziona, vedrai il messaggio Test Passed.

Testing delle interazioni

Supponiamo di avere un componente che consente agli utenti di aggiornare il saluto con il file src/components/InteractiveGreeting.js:

import React, { useState } from 'react';
const InteractiveGreeting = () => {
    const [name, setName] = useState('');
    return (
        <div>
            <input
                type="text"
                placeholder="Inserisci il tuo nome"
                value={name}
                onChange={(e) => setName(e.target.value)}
            />
            <h1>Ciao, {name || 'Ospite'}!</h1>
        </div>
    );
};
export default InteractiveGreeting;

Per testare questo componente, possiamo verificare che il saluto cambi quando l'utente digita qualcosa nel campo di input.

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import InteractiveGreeting from './InteractiveGreeting';
test('aggiorna il saluto in base al nome inserito', () => {
    render(<InteractiveGreeting />);
    const inputElement = screen.getByPlaceholderText(/Inserisci il tuo nome/i);
    const greetingElement = screen.getByText(/Ciao, Ospite!/i);
    // Simula la digitazione di un nome
    fireEvent.change(inputElement, { target: { value: 'Luca' } });
    // Controlla se il saluto è stato aggiornato
    expect(screen.getByText(/Ciao, Luca!/i)).toBeInTheDocument();
    expect(greetingElement).not.toBeInTheDocument();
});

1. fireEvent.change: simula un evento di input (ad esempio, un utente che digita un testo).
2. screen.getByPlaceholderText: cerca un elemento basato sul testo del placeholder.

Testing Front-End di componenti complessi

Testing Library consente di testare anche componenti complessi con più stati e interazioni. Supponiamo di avere un componente di una lista di attività (To-Do List) nel file src/components/TodoList.js.

import React, { useState } from 'react';
const TodoList = () => {
    const [tasks, setTasks] = useState([]);
    const [newTask, setNewTask] = useState('');
    const addTask = () => {
        if (newTask.trim()) {
            setTasks([...tasks, newTask]);
            setNewTask('');
        }
    };
    return (
        <div>
            <input
                type="text"
                placeholder="Aggiungi una nuova attività"
                value={newTask}
                onChange={(e) => setNewTask(e.target.value)}
            />
            <button onClick={addTask}>Aggiungi</button>
            <ul>
                {tasks.map((task, index) => (
                    <li key={index}>{task}</li>
                ))}
            </ul>
        </div>
    );
};
export default TodoList;

Testiamo questo componente per verificare che le attività vengano aggiunte correttamente.

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import TodoList from './TodoList';
test('aggiunge una nuova attività alla lista', () => {
    render(<TodoList />);
    const inputElement = screen.getByPlaceholderText(/Aggiungi una nuova attività/i);
    const addButton = screen.getByText(/Aggiungi/i);
    // Simula l'aggiunta di un'attività
    fireEvent.change(inputElement, { target: { value: 'Completare il progetto' } });
    fireEvent.click(addButton);
    // Controlla se l'attività è nella lista
    expect(screen.getByText(/Completare il progetto/i)).toBeInTheDocument();
});

Best Practices per il Testing Front-End

1. Testa l'app dal punto di vista dell'utente: concentrati sul comportamento visibile e sulle interazioni reali.
2. Mantieni i test isolati: evita di introdurre dipendenze complesse nei test.
3. Evita di testare implementazioni interne: testa solo ciò che l'utente può vedere o fare.
4. Scrivi test chiari e leggibili: nomina i test in modo descrittivo per spiegare il loro scopo.

Conclusioni

Jest e Testing Library offrono un potente toolkit per testare applicazioni front-end in modo efficace. Abbiamo analizzato:

• come configurare Jest e Testing Library.
• Come scrivere test per componenti React semplici e complessi.
• Come simulare interazioni dell'utente.

Il testing nel front-end non è solo un'opzione, ma una necessità per garantire un'esperienza utente fluida e senza errori. Seguendo questa guida sei pronto per integrare il testing nei tuoi progetti React e costruire applicazioni robuste e affidabili.