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

Маніпуляція 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');
});

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. Jest ships with jsdom which simulates a DOM environment as if you were in the browser. This means that every DOM API that we call can be observed in the same way it would be observed in a browser!

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

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