Перейти до основного змісту
Версія: 29.6

Маніпуляція 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).toBeCalled();
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 install --save-dev jest-environment-jsdom

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