JavaScript: testing con Jest e React Testing Library

Il testing è un aspetto cruciale dello sviluppo di applicazioni JavaScript, garantisce infatti che il codice funzioni come previsto, riduce bug e migliora la manutenzione. In questo tutorial capiremo come utilizzare Jest e React Testing Library per testare applicazioni JavaScript e React in modo efficace.

Jest e React Testing Library

Jest è un framework per il testing in JavaScript sviluppato da Facebook. È progettato per essere veloce, semplice da configurare e offre funzionalità avanzate come mocking, copertura del codice e snapshot testing. I suoi vantaggi comprendono:

• Una configurazione minimale: funziona immediatamente senza dover installare degli strumenti aggiuntivi.
• Mocking integrato per simulare funzioni e moduli.
• Compatibilità con TypeScript

La React Testing Library è invece una libreria progettata per testare componenti React simulando l'interazione dell'utente. A differenza di altri strumenti dello stesso tipo, essa si concentra su come gli utenti reali interagiscono con l'applicazione invece che sui dettagli di implementazione. Le sue cratteristiche principali comprendono:

• test basati sul comportamento dell'utente, come per esempio clic, inserimenti di testo e selezione di elementi.
• Fornisce API per trovare elementi basandosi sui ruoli, il testo o gli attributi.
• Leggera e facile da integrare con Jest.

Configurazione dell'ambiente di testing JavaScript

Per iniziare, configura un ambiente di testing JavaScript con Jest e React Testing Library iniziando dall'installazione delle dipendenze necessarie. Assicurati quindi di avere Node.js e npm o yarn installati. Poi, aggiungi le librerie necessarie con questa istruzione:

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

Fatto questo potrai scrivere il tuo rimo rest con Jest. Crea quindi una funzione semplice da testare, ad esempio tramite un file chiamato sum.js.

function sum(a, b) {
    return a + b;
}

module.exports = sum;

Esegui poi il test con il comando:

npm test

Se il test si dovesse concludere con successo visualizzerai un messaggio che conferma l'esito positivo.

Testing dei componenti react

Ora passiamo ai test dei componenti React. Creiamo un semplice componente di esempio come quello proposto di seguito (file Button.js):

import React from 'react';

const Button = ({ onClick, label }) => {
    return <button onClick={onClick}>{label}</button>;
};
export default Button;

Scriviamo poi un test per verificare che il pulsante venga renderizzato e reagisca ai clic (file: Button.test.js).

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

test('renders button with correct label', () => {
    render(<Button label="Cliccami" />);
    const buttonElement = screen.getByText(/cliccami/i);
    expect(buttonElement).toBeInTheDocument();
});
test('calls onClick when button is clicked', () => {
    const onClickMock = jest.fn();
    render(<Button label="Cliccami" onClick={onClickMock} />);
    const buttonElement = screen.getByText(/cliccami/i);
    fireEvent.click(buttonElement);
    expect(onClickMock).toHaveBeenCalledTimes(1);
});

Migliorare i test con React Testing Library

React Testing Library offre diversi metodi per trovare elementi e simulare interazioni. Creiamo ad esempio un componente che accetta un testo da un input e lo visualizza (Input.js):

import React, { useState } from 'react';

const Input = () => {
    const [text, setText] = useState('');
    return (
        <div>
            <input
                value={text}
                onChange={(e) => setText(e.target.value)}
                placeholder="Inserisci testo"
            />
            {text}
        </div>
    );
};

export default Input;

Scriviamo un test per verificare il comportamento (file: Input.test.js

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import Input from './Input';
test('aggiorna il testo quando l\'utente digita', () => {
    render(<Input />);
    const inputElement = screen.getByPlaceholderText(/inserisci testo/i);
    fireEvent.change(inputElement, { target: { value: 'ciao' } });
    expect(screen.getByText(/ciao/i)).toBeInTheDocument();
});

Testare stati complessi e componenti annidati

Quando si testano applicazioni JavaScript più grandi è importante verificare stati complessi e componenti annidati. React Testing Library semplifica questa operazione. Ad esempio, supponiamo di avere un componente Counter (file: Counter.js):

import React, { useState } from 'react';

const Counter = () => {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>Conteggio: {count}</p>
            <button onClick={() => setCount(count + 1)}>Incrementa</button>
        </div>
    );
};

export default Counter;

Scriviamo quindi un test per verificare il comportamento (file Counter.test.js

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';
test('incrementa il conteggio quando si clicca il pulsante', () => {
    render(<Counter />);
    const button = screen.getByText(/incrementa/i);
    fireEvent.click(button);
    expect(screen.getByText(/conteggio: 1/i)).toBeInTheDocument();
});

Test di accessibilità

React Testing Library include funzionalità che facilitano i test di accessibilità. Utilizzando getByRole, puoi verificare che gli elementi abbiano il ruolo corretto:

const button = screen.getByRole('button', { name: /incrementa/i });
expect(button).toBeInTheDocument();

Conclusione: Jest e React Testing Library per JavaScript

Jest e React Testing Library offrono strumenti potenti per testare applicazioni JavaScript e React. Con Jest, puoi eseguire test unitari, mocking e snapshot. React Testing Library, invece, ti consente di verificare come gli utenti interagiscono con i componenti. Investire tempo nei test migliora la qualità del codice e assicura un'esperienza utente affidabile.

Con questa guida hai le basi per iniziare a testare le tue applicazioni in modo efficace. Prova a integrare queste pratiche nei tuoi progetti per ottenere software più robusti e affidabili.