Маніпуляція DOM

Інший клас функцій, який часто вважається важким для тестування - це код, що напряму взаємодіє з DOM. Поглянемо, як ми можемо протестувати наступний фрагмент коду jQuery, що слухає подію click, отримує деякі дані асинхронно та змінює контент 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);
  });
});

Знову ж таки, ми створюємо тестовий файл в __tests__ / теці:

__tests__/displayUser-test.js

'use strict';

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

test('displays a user after a click', () => {
  // Встановлюємо body нашого документу
  document.body.innerHTML =
    '<div>' +
    '  <span id="username" />' +
    '  <button id="button" />' +
    '</div>';

  // Цей модуль має побічний ефект
  require('../displayUser');

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

  // Вказуємо функції-імітації fetchCurrentUser автоматично викликає
  // її зворотний виклик з деякими даними
  fetchCurrentUser.mockImplementation(cb => {
    cb({
      fullName: 'Johnny Cash',
      loggedIn: true,
    });
  });

  // Використовуємо jquery для симуляції натискання кнопки
  $('#button').click();

  // Стверджуємо, що функція fetchCurrentUser function викликалась, та
  // внутрішній текст #username span оновився згідно з нашими очікуваннями.
  expect(fetchCurrentUser).toHaveBeenCalled();
  expect($('#username').text()).toBe('Johnny Cash - Logged In');
});

Ми створюємо мок для fetchCurrentUser.js, тому наш тест не робить справжніх мережевих запитів, а отримує імітацію даних локально. Це гарантує, що наш тест можна завершити за декілька мілісекундах, а не секунд і гарантує високу швидкість інтерації юніт-тестів.

Також, функція, що тестується, підписується на події DOM елемента #button, тому нам потрібно правильно налаштувати наш DOM для тесту. jsdom та пакет jest-environment-jsdom імітують середовище DOM аналогічно до представлення в браузері. This means that every DOM API that we call can be observed in the same way it would be observed in a browser!

Щоб почати роботу з тестовим середовищем JSDOM, має бути встановлений пакет jest-environment-jsdom, якщо цього вже не зроблено:

npm

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

Yarn

yarn add --dev jest-environment-jsdom

pnpm

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

Код цього прикладу доступний в Приклади/jquery.