Manipulation du DOM

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Une autre catégorie de fonctions souvent jugée difficile à tester est le code manipulant directement le DOM. Voyons comment tester cet extrait de code jQuery qui écoute un événement de clic, récupère des données de manière asynchrone et définit le contenu d'un élément 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);
  });
});

À nouveau, nous créons un fichier de test dans le dossier __tests__/ :

__tests__/displayUser-test.js

'use strict';

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

test('displays a user after a click', () => {
  // Set up our document body
  document.body.innerHTML =
    '<div>' +
    '  <span id="username" />' +
    '  <button id="button" />' +
    '</div>';

  // This module has a side-effect
  require('../displayUser');

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

  // Tell the fetchCurrentUser mock function to automatically invoke
  // its callback with some data
  fetchCurrentUser.mockImplementation(cb => {
    cb({
      fullName: 'Johnny Cash',
      loggedIn: true,
    });
  });

  // Use jquery to emulate a click on our button
  $('#button').click();

  // Assert that the fetchCurrentUser function was called, and that the
  // #username span's inner text was updated as we'd expect it to.
  expect(fetchCurrentUser).toHaveBeenCalled();
  expect($('#username').text()).toBe('Johnny Cash - Logged In');
});

Nous simulons (mock) fetchCurrentUser.js pour éviter les requêtes réseau réelles, résolvant plutôt des données simulées localement. Cela garantit l'exécution du test en millisecondes plutôt qu'en secondes, assurant une vitesse d'itération rapide pour les tests unitaires.

De plus, la fonction testée ajoute un écouteur d'événements sur l'élément DOM #button, nécessitant une configuration DOM appropriée. jsdom et le paquet jest-environment-jsdom simulent un environnement DOM comme dans un navigateur. Ainsi, chaque API DOM appelée s'observe exactement comme dans un navigateur !

Pour démarrer avec l'environnement de test JSDOM, installez le paquet jest-environment-jsdom s'il n'est pas déjà présent :

npm

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

Yarn

yarn add --dev jest-environment-jsdom

pnpm

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

Bun

bun add --dev jest-environment-jsdom

Le code de cet exemple est disponible sur examples/jquery.