Zum Hauptinhalt springen
Version: 30.0

DOM-Manipulation

Inoffizielle Beta-Übersetzung

Diese Seite wurde von PageTurner AI übersetzt (Beta). Nicht offiziell vom Projekt unterstützt. Fehler gefunden? Problem melden →

Eine weitere Kategorie von Funktionen, die oft als schwierig zu testen gilt, ist Code, der direkt das DOM manipuliert. Schauen wir uns an, wie wir den folgenden jQuery-Codeausschnitt testen können, der auf ein Klickereignis reagiert, asynchron Daten abruft und den Inhalt eines span-Elements setzt.

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

Erstellen wir erneut eine Testdatei im Ordner __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');
});

Wir mocken fetchCurrentUser.js, damit unser Test keine echte Netzwerkanfrage durchführt, sondern stattdessen lokal auf Mock-Daten zurückgreift. Dadurch wird sichergestellt, dass unser Test in Millisekunden statt Sekunden abgeschlossen werden kann und eine schnelle Iterationsgeschwindigkeit für Unit-Tests gewährleistet.

Außerdem fügt die zu testende Funktion einen Event-Listener auf dem DOM-Element #button hinzu, daher müssen wir unser DOM für den Test korrekt einrichten. jsdom und das Paket jest-environment-jsdom simulieren eine DOM-Umgebung, als ob Sie sich in einem Browser befinden würden. Das bedeutet, dass jeder DOM-API-Aufruf genauso beobachtet werden kann, wie es in einem Browser der Fall wäre!

Um mit der JSDOM-Testumgebung zu beginnen, muss das Paket jest-environment-jsdom installiert werden, falls noch nicht vorhanden:

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

Der Code für dieses Beispiel ist unter examples/jquery verfügbar.