Testing di Applicazioni React

Introduzione

Il testing automatizzato consiste nello scrivere codice che verifica automaticamente il funzionamento del codice dell’applicazione. A differenza del testing manuale, i test automatizzati possono essere eseguiti ogni volta che si modifica il codice, permettendo di verificare che tutte le funzionalità continuino a funzionare correttamente. Questo articolo esplora come testare applicazioni React usando Jest e React Testing Library.

Perché il Testing Automatizzato

Il testing manuale è importante ma limitato: è difficile testare tutte le combinazioni e gli scenari possibili, e quando si aggiunge una nuova funzionalità non si testano sempre tutte le altre parti dell’applicazione. I test automatizzati permettono di testare tutto il codice ogni volta che si apportano modifiche, riducendo il rischio che bug passino inosservati.

Tipi di Test

Esistono tre categorie principali di test automatizzati:

Unit Test

I unit test verificano le unità più piccole dell’applicazione: funzioni individuali o componenti React isolati dagli altri. I progetti tipicamente contengono molti unit test perché si vuole testare ogni unità che compone l’applicazione.

Integration Test

Gli integration test verificano la combinazione di più componenti che lavorano insieme. I progetti contengono meno integration test rispetto agli unit test, ma sono comunque molto importanti. In React, la distinzione tra unit test e integration test è spesso sfumata perché spesso si testa un componente che usa altri componenti.

End-to-End Test

Gli end-to-end test verificano interi flussi dell’applicazione, riproducendo ciò che un utente reale farebbe. Sono importanti ma meno numerosi perché gli unit test e gli integration test sono più veloci da eseguire e più facili da mantenere.

Setup: Jest e React Testing Library

Per testare applicazioni React servono due strumenti principali:

• Jest: esegue i test e verifica i risultati (assertions)
• React Testing Library: simula il rendering dei componenti React in un ambiente di test

Entrambi sono già installati e configurati nei progetti creati con Create React App. I file di test seguono la convenzione *.test.js o *.test.jsx.

Scrivere il Primo Test

Un test è definito con la funzione test() che riceve due argomenti: una descrizione del test e una funzione che contiene il codice del test.

Pattern AAA: Arrange, Act, Assert

Quando si scrive un test, si segue tipicamente il pattern delle tre A:

1. Arrange: preparare il test, ad esempio renderizzare il componente
2. Act: eseguire l’azione da testare, ad esempio simulare un click
3. Assert: verificare che il risultato corrisponda alle aspettative

1
import { render, screen } from '@testing-library/react'
2
import Greeting from './Greeting'
3

4
test('renders Hello World as a text', () => {
5
  // Arrange: renderizzare il componente
6
  render(<Greeting />)
7

8
  // Act: nessuna azione necessaria in questo caso
9

10
  // Assert: verificare che il testo sia presente
11
  const helloWorldElement = screen.getByText('Hello World!')
12
  expect(helloWorldElement).toBeInTheDocument()
13
})

Query Methods: getBy, queryBy, findBy

React Testing Library fornisce diversi metodi per trovare elementi:

• getBy: lancia un errore se l’elemento non viene trovato
• queryBy: restituisce null se l’elemento non viene trovato (utile per verificare assenze)
• findBy: restituisce una Promise e attende che l’elemento appaia (utile per codice asincrono)

1
// getBy lancia errore se non trova l'elemento
2
const element = screen.getByText('Hello World!')
3

4
// queryBy restituisce null se non trova l'elemento
5
const missingElement = screen.queryByText('Not found')
6
expect(missingElement).toBeNull()
7

8
// findBy attende che l'elemento appaia (async)
9
const asyncElement = await screen.findByText('Loaded content')

Selezionare Elementi

Gli elementi possono essere selezionati in vari modi:

1
// Per testo (case-insensitive con regex)
2
screen.getByText(/hello world/i)
3

4
// Per ruolo (accessibilità)
5
screen.getByRole('button')
6
screen.getAllByRole('listitem') // per più elementi
7

8
// Per testo esatto o parziale
9
screen.getByText('Hello World!', { exact: false })

Test con Interazioni Utente

Per testare interazioni come click o input, si usa userEvent da @testing-library/user-event:

1
import { render, screen } from '@testing-library/react'
2
import userEvent from '@testing-library/user-event'
3
import Greeting from './Greeting'
4

5
describe('Greeting component', () => {
6
  test('renders "good to see you" if button was NOT clicked', () => {
7
    // Arrange
8
    render(<Greeting />)
9

10
    // Act: nessuna azione
11

12
    // Assert
13
    const outputElement = screen.getByText('good to see you', { exact: false })
14
    expect(outputElement).toBeInTheDocument()
15
  })
16

17
  test('renders "Changed" if button was clicked', async () => {
18
    // Arrange
19
    render(<Greeting />)
20

21
    // Act: simulare click sul bottone
22
    const buttonElement = screen.getByRole('button')
23
    await userEvent.click(buttonElement)
24

25
    // Assert
26
    const outputElement = screen.getByText('Changed')
27
    expect(outputElement).toBeInTheDocument()
28
  })
29

30
  test('does not render "good to see you" if button was clicked', async () => {
31
    // Arrange
32
    render(<Greeting />)
33

34
    // Act
35
    const buttonElement = screen.getByRole('button')
36
    await userEvent.click(buttonElement)
37

38
    // Assert: verificare che l'elemento NON sia presente
39
    const outputElement = screen.queryByText('good to see you', { exact: false })
40
    expect(outputElement).toBeNull()
41
  })
42
})

Organizzare i Test con Describe

Per organizzare test correlati, si usa describe() per creare suite di test:

1
describe('Greeting component', () => {
2
  test('renders Hello World as a text', () => {
3
    // ...
4
  })
5

6
  test('renders "good to see you" if button was NOT clicked', () => {
7
    // ...
8
  })
9

10
  // Altri test correlati...
11
})

Test con Componenti Multipli

Quando un componente usa altri componenti, render() renderizza l’intero albero di componenti. Questo permette di testare componenti che dipendono da altri senza doverli testare separatamente:

1
// Greeting.jsx usa Output component
2
import Output from './Output'
3

4
function Greeting() {
5
  return (
6
    <div>
7
      <h2>Hello World!</h2>
8
      <Output>It's good to see you.</Output>
9
    </div>
10
  )
11
}
12

13
// Il test di Greeting funziona anche se usa Output
14
test('renders greeting with output component', () => {
15
  render(<Greeting />)
16
  const outputElement = screen.getByText('It\'s good to see you.')
17
  expect(outputElement).toBeInTheDocument()
18
})

Test con Richieste HTTP Asincrone

Quando un componente effettua richieste HTTP, ci sono due sfide principali:

1. Attendere il completamento: usare findBy invece di getBy per attendere che i dati vengano caricati
2. Evitare richieste reali: usare mock per simulare le richieste invece di inviarle realmente

Attendere Dati Asincroni

1
import { render, screen } from '@testing-library/react'
2
import Async from './Async'
3

4
test('renders posts if request succeeds', async () => {
5
  // Arrange
6
  render(<Async />)
7

8
  // Act: nessuna azione, il componente carica automaticamente
9

10
  // Assert: attendere che i post vengano renderizzati
11
  const listItemElements = await screen.findAllByRole('listitem')
12
  expect(listItemElements).not.toHaveLength(0)
13
})

Mocking di Fetch

Per evitare di inviare richieste HTTP reali durante i test, si sostituisce fetch con una funzione mock:

1
import { render, screen } from '@testing-library/react'
2
import Async from './Async'
3

4
test('renders posts if request succeeds', async () => {
5
  // Arrange: mockare fetch
6
  window.fetch = jest.fn()
7
  window.fetch.mockResolvedValueOnce({
8
    json: async () => [
9
      { id: 'p1', title: 'First post' },
10
      { id: 'p2', title: 'Second post' }
11
    ]
12
  })
13

14
  render(<Async />)
15

16
  // Assert
17
  const listItemElements = await screen.findAllByRole('listitem')
18
  expect(listItemElements).not.toHaveLength(0)
19
})

jest.fn() crea una funzione mock che può essere configurata con mockResolvedValueOnce() per simulare il valore di risposta di una Promise.

Cosa Testare

Quando si scrivono test, è importante sapere cosa testare:

• Cosa: testare i singoli building block dell’applicazione, con test piccoli e focalizzati che verificano una cosa alla volta
• Come: testare sia i casi di successo che quelli di errore, inclusi scenari rari ma possibili

Ogni test dovrebbe essere indipendente e verificare un comportamento specifico.

Risorse per Approfondire

Per approfondire il testing di applicazioni React:

• Jest Documentation: documentazione ufficiale di Jest con guide su matchers, async code e mocking
• React Testing Library Documentation: documentazione completa su come testare React, con esempi e API reference
• React Hooks Testing Library: estensione per testare custom hooks in modo più semplice

Riepilogo

Il testing automatizzato permette di verificare automaticamente che il codice funzioni correttamente ogni volta che si apportano modifiche. Jest esegue i test e verifica i risultati, mentre React Testing Library permette di renderizzare componenti e simulare interazioni utente in un ambiente di test. I test seguono il pattern AAA (Arrange, Act, Assert) e possono verificare componenti statici, interazioni utente, componenti multipli e richieste HTTP asincrone usando mock. Organizzare i test in suite con describe() aiuta a mantenere il codice di test organizzato e leggibile.