Configuration de l’environnement de test

Écrire des tests pour votre code jQuery est essentiel pour créer des applications web robustes et faciles à maintenir. Cela aide à détecter rapidement les bogues et garantit que votre code se comporte comme prévu.

• Prévient les régressions : garantit que les nouvelles modifications ne dégradent pas les fonctionnalités existantes.
• Améliore la qualité du code : vous pousse à écrire du code modulaire et testable.
• Facilite la collaboration : fournit une documentation claire du fonctionnement attendu des composants.

Pour tester JavaScript, notamment jQuery, vous avez besoin d’un exécuteur de tests. Cet outil exécute vos tests et en présente les résultats.

Deux options populaires sont :

• Jest : un framework de test moderne et riche en fonctionnalités, créé par Facebook, largement utilisé avec React, mais adapté à tout code JS.
• QUnit : un framework de test spécifique à jQuery, plus simple, mais moins riche en fonctionnalités que Jest.

Dans cette leçon, nous nous concentrerons sur la configuration de Jest en raison de ses fonctionnalités complètes et de son adoption généralisée.

Avant d’installer Jest, vous devez disposer d’un projet Node.js. Si ce n’est pas le cas, vous pouvez facilement en créer un.

Dans le terminal, accédez au répertoire de votre projet et exécutez :

Cette commande crée un fichier package.json, qui gère les dépendances et les scripts de votre projet.

Installons maintenant Jest. Comme jQuery interagit souvent avec le DOM du navigateur (Document Object Model), nous aurons également besoin de jest-environment-jsdom. JSDOM fournit un environnement semblable à celui d’un navigateur dans Node.js, afin que votre code jQuery puisse manipuler un DOM virtuel.

Installez-les comme dépendances de développement :

Jest et JSDOM sont ainsi ajoutés à votre package.json.

Pour indiquer à Jest d’utiliser JSDOM, vous devez le configurer. Vous pouvez ajouter un script test à votre package.json ou créer un fichier jest.config.js.

Option 1 : dans 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’option --env=jsdom garantit que Jest exécute les tests dans un environnement JSDOM.

Jest recherche les fichiers de test dans un répertoire __tests__ ou dans les fichiers dont le nom se termine par .test.js (ou .spec.js). Créons un fichier de test simple.

Créez un répertoire nommé __tests__ à la racine de votre projet, puis ajoutez un fichier tel que __tests__/my-feature.test.js :

// __tests__/my-feature.test.js

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

describe regroupe les tests associés, et test (ou it) définit un cas de test individuel.

Pour tester du code jQuery, vous devez importer jQuery lui-même dans votre fichier de test. Vous pouvez installer jQuery avec npm : npm install jquery.

Ensuite, dans votre fichier de test, vous pouvez l’importer :

// __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);
  });
});

Les assertions permettent de vérifier que votre code se comporte correctement. Jest utilise la fonction expect() avec des comparateurs pour effectuer des assertions.

Voici un exemple JavaScript simple (qui n’est pas spécifique à jQuery, mais illustre les assertions) :

Jest propose un large ensemble de comparateurs. En voici quelques-uns que vous utiliserez souvent :

• .toBe(value) : vérifie l’égalité exacte (comme ===).
• .toEqual(value) : vérifie l’égalité approfondie d’objets ou de tableaux.
• .not.toBe(value) : vérifie l’inégalité.
• .toBeTruthy() / .toBeFalsy() : vérifie si une valeur est évaluée comme vraie ou fausse.
• .toContain(item) : vérifie si un tableau ou une chaîne contient un élément.

Avec jQuery, vous les combinerez souvent avec des méthodes jQuery, comme expect($element.text()).toBe('Expected Text');

Une fois vos fichiers de test configurés, leur exécution est simple. Utilisez le script défini dans package.json :

Jest trouvera tous vos fichiers de test, les exécutera dans l’environnement JSDOM et présentera les résultats dans votre terminal. Il vous indiquera quels tests ont réussi ou échoué et fournira des détails pour chaque échec.

Vous avez appris à configurer un environnement de test pour jQuery avec Jest et JSDOM. Lesquelles des commandes et configurations suivantes sont essentielles à une configuration Jest de base prenant en charge le DOM ?

Dans cette leçon, vous avez appris à configurer un environnement de test robuste pour vos applications jQuery avec Jest.

• Nous avons initialisé un projet Node.js avec npm init.
• Nous avons installé Jest et jest-environment-jsdom pour simuler un environnement de navigateur.
• Nous avons configuré Jest dans package.json afin d’utiliser JSDOM.
• Nous avons vu comment structurer les fichiers de test, importer jQuery et écrire des assertions de base avec les comparateurs de Jest.

Cette base vous permet d’écrire des tests efficaces et de garantir que votre code jQuery est fiable et facile à maintenir.