Configurazione dell'ambiente di test

Scrivere test per il codice jQuery è fondamentale per creare applicazioni web robuste e facili da mantenere. Aiuta a individuare tempestivamente i bug e garantisce che il codice si comporti come previsto.

• Previene le regressioni: garantisce che le nuove modifiche non interrompano le funzionalità esistenti.
• Migliora la qualità del codice: richiede di scrivere codice modulare e testabile.
• Facilita la collaborazione: fornisce una documentazione chiara sul funzionamento previsto dei componenti.

Per testare JavaScript, incluso jQuery, è necessario un test runner. Questo strumento esegue i test e ne comunica i risultati.

Due opzioni diffuse sono:

• Jest: un framework di testing moderno e ricco di funzionalità, sviluppato da Facebook e ampiamente utilizzato con React, ma ottimo per qualsiasi codice JS.
• QUnit: un framework di testing specifico per jQuery, più semplice ma con meno funzionalità rispetto a Jest.

In questa lezione ci concentreremo sulla configurazione di Jest, grazie alle sue funzionalità complete e alla sua ampia diffusione.

Prima di installare Jest, è necessario disporre di un progetto Node.js. Se non ne ha ancora uno, può crearlo facilmente.

Nel terminale, acceda alla directory del progetto ed esegua:

Questo comando crea un file package.json, che gestisce le dipendenze e gli script del progetto.

Ora installiamo Jest. Poiché jQuery interagisce spesso con il DOM (Document Object Model) del browser, ci servirà anche jest-environment-jsdom. JSDOM fornisce un ambiente simile a quello di un browser in Node.js, consentendo al codice jQuery di manipolare un DOM virtuale.

Li installi come dipendenze di sviluppo:

In questo modo Jest e JSDOM vengono aggiunti al file package.json.

Per indicare a Jest di usare JSDOM, è necessario configurarlo. Può farlo aggiungendo uno script test al file package.json oppure creando un file jest.config.js.

Opzione 1: in package.json

{
  "name": "my-jquery-app",
  "version": "1.0.0",
  "scripts": {
    "test": "jest --env=jsdom"
  },
  "devDependencies": {
    "jest": "^29.x.x",
    "jest-environment-jsdom": "^29.x.x"
  }
}

L'opzione --env=jsdom garantisce che Jest esegua i test in un ambiente JSDOM.

Jest cerca i file di test in una directory __tests__ o nei file che terminano con .test.js (o .spec.js). Creiamo un semplice file di test.

Crei una directory denominata __tests__ nella cartella radice del progetto, quindi aggiunga un file come __tests__/my-feature.test.js:

// __tests__/my-feature.test.js

describe('My Feature', () => {
  test('should do something basic', () => {
    // Test logic will go here
  });
});

describe raggruppa i test correlati, mentre test (o it) definisce un singolo caso di test.

Per testare il codice jQuery, è necessario importare jQuery stessa nel file di test. Può installare jQuery tramite npm: npm install jquery.

Quindi, nel file di test, può importarla:

// __tests__/my-feature.test.js
const $ = require('jquery');

describe('My jQuery Feature', () => {
  // Setup for each test
  beforeEach(() => {
    // Create a fresh DOM element for each test
    document.body.innerHTML = '
Hello
';
  });

  test('should add a class to the element', () => {
    const element = $('#test-element');
    element.addClass('highlight');
    expect(element.hasClass('highlight')).toBe(true);
  });
});

Le assertion consentono di verificare che il codice si comporti correttamente. Jest usa la funzione expect() insieme ai matcher per formulare le assertion.

Ecco un semplice esempio JavaScript (non specifico di jQuery, ma utile per dimostrare le assertion):

Jest offre un insieme completo di matcher. Eccone alcuni comuni che utilizzerà:

• .toBe(value): verifica l'uguaglianza esatta, come ===.
• .toEqual(value): verifica l'uguaglianza profonda di oggetti o array.
• .not.toBe(value): verifica la disuguaglianza.
• .toBeTruthy() / .toBeFalsy(): verifica se un valore è truthy o falsy.
• .toContain(item): verifica se un array o una stringa contiene un elemento.

Con jQuery, spesso li combinerà con i metodi jQuery, ad esempio expect($element.text()).toBe('Expected Text');

Una volta configurati i file di test, eseguirli è semplice. Usi semplicemente lo script definito in package.json:

Jest individuerà tutti i file di test, li eseguirà nell'ambiente JSDOM e comunicherà i risultati nel terminale. Mostrerà quali test sono stati superati, quali hanno avuto esito negativo e fornirà i dettagli degli eventuali errori.

Ha imparato a configurare un ambiente di testing per jQuery usando Jest e JSDOM. Quali dei seguenti comandi e configurazioni sono essenziali per una configurazione Jest di base con supporto al DOM?

In questa lezione ha imparato a configurare un ambiente di testing robusto per le applicazioni jQuery usando Jest.

• Abbiamo inizializzato un progetto Node.js con npm init.
• Abbiamo installato Jest e jest-environment-jsdom per simulare un ambiente browser.
• Abbiamo configurato Jest in package.json per usare JSDOM.
• Abbiamo visto come strutturare i file di test, importare jQuery e scrivere assertion di base usando i matcher di Jest.

Queste basi consentono di scrivere test efficaci, garantendo che il codice jQuery sia affidabile e facile da mantenere.