Hopp til hovedinnhold
Versjon: Neste

DOM-manipulering

Unofficial Beta Translation

This page was AI-translated by PageTurner (beta). Not officially endorsed by the project. Found an error? Report issue →

En annen kategori funksjoner som ofte anses som vanskelige å teste er kode som manipulerer DOM direkte. La oss se hvordan vi kan teste følgende jQuery-kodesnutt som lytter til et klikk-hendelse, henter data asynkront og setter innholdet i et span-element.

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

Igjen oppretter vi en testfil i mappen __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');
});

Vi mock'er fetchCurrentUser.js slik at testen vår ikke gjør ekte nettverksforespørsler, men i stedet resolverer lokale testdata. Dette sikrer at testen vår kan fullføres på millisekunder i stedet for sekunder, og garanterer rask enhetstest-iterasjonshastighet.

Funksjonen som testes legger også til en event listener på #button DOM-elementet, så vi må sette opp DOM-en riktig for testen. jsdom og jest-environment-jsdom-pakken simulerer et DOM-miljø som om du var i en nettleser. Dette betyr at alle DOM API-er vi kaller kan observeres på samme måte som i en nettleser!

For å komme i gang med JSDOM-testmiljøet, må jest-environment-jsdom-pakken installeres hvis den ikke allerede er det:

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

Koden for dette eksempelet er tilgjengelig på examples/jquery.