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

Again, we create a test file in the __tests__/ folder:

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

We are mocking fetchCurrentUser.js so that our test doesn't make a real network request but instead resolves to mock data locally. 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.

Also, the function being tested adds an event listener on the #button DOM element, so we need to set up our DOM correctly for the test. jsdom and the jest-environment-jsdom package simulate a DOM environment as if you were in the browser. 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 !

To get started with the JSDOM test environment, the jest-environment-jsdom package must be installed if it's not already:

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

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