Manipulation du DOM

Une autre classe de fonctions qui est souvent considérée comme difficile à tester est le code qui manipule directement le DOM. Voyons comment nous pouvons tester le bout de code jQuery suivant qui écoute un événement de clic, récupère des données de manière asynchrone et définit le contenu d'un span.

displayUser.js

'use strict';

const $ = require('jquery');
const fetchCurrentUser = require('./fetchCurrentUser.js');

$('#button').click(() => {
  fetchCurrentUser(user => {
    const loggedText = 'Logged ' + (user.loggedIn ? 'In' : 'Out');
    $('#username').text(user.fullName + ' - ' + loggedText);
  });
});

Encore une fois, nous créons un fichier de test dans le dossier __tests__/ :

__tests__/displayUser-test.js

'use strict';

jest.mock('../fetchCurrentUser');

test('affiche un utilisateur après un clic', () => {
  // configure le body du document
  document.body.innerHTML =
    '<div>' +
    '  <span id="username" />' +
    '  <button id="button" />' +
    '</div>';

  // Ce module a un effet de bord
  require('../displayUser');

  const $ = require('jquery');
  const fetchCurrentUser = require('../fetchCurrentUser');

  // Dit à la fonction simulée fetchCurrentUser de faire appel automatiquement à
  // son callback avec des données
  fetchCurrentUser.mockImplementation(cb => {
    cb({
      fullName: 'Johnny Cash',
      loggedIn: true,
    });
  });

  // Utilise jquery pour émuler un clic sur notre bouton
  $('#button').click();

  // Vérifie que la fonction fetchCurrentUser a été appelée et que
  // le texte interne du span #username a été mis à jour comme nous l'attendions.
  expect(fetchCurrentUser).toHaveBeenCalled();
  expect($('#username').text()).toBe('Johnny Cash - Logged In');
});

Nous simulons fetchCurrentUser.js pour que notre test ne fasse pas une vraie requête réseau mais se résolve localement avec des données simulées. Cela permet à notre test de se terminer au bout de quelques millisecondes plutôt qu'en secondes et garantit une vitesse d'itération rapide du test unitaire.

Aussi, la fonction testée ajoute un écouteur d'événements sur l'élément DOM #button, nous devons donc configurer notre DOM correctement pour le test. jsdom et le paquet jest-environment-jsdom simulent un environnement DOM comme si vous étiez dans le navigateur. Cela signifie que chaque API du DOM que nous appelons peut être observée de la même manière qu'elle le serait dans un navigateur !

Pour commencer avec l'environnement de test de JSDOM, le paquet jest-environment-jsdom doit être installé si ce n'est pas déjà le cas :

npm

npm install --save-dev jest-environment-jsdom

Yarn

yarn add --dev jest-environment-jsdom

pnpm

pnpm add --save-dev jest-environment-jsdom

The code for this example is available at examples/jquery.