Использование тестового бегуна для тестирования функций, которые манипулируют DOM

Question

Я узнал о комплексных тестах для веб-приложений совсем недавно. Они в основном копируют пользовательский сценарий от начала до конца, буквально запуская веб-браузер. Есть, например, NightwatchJS и TetsCafé.

Есть также бегуны модульных тестов, такие как Mocha, Jasmine, AVA, Jest, QUnit. Если я правильно понимаю, они позволяют тестировать блоки кода, подобные функциям, сравнивая возвращаемое значение с известным результатом.

Если я создаю веб-приложение, которое включает обработку объектов документа, то есть добавление и удаление элементов или изменение их позиций. Могу ли я сделать это с помощью пяти вышеупомянутых модульных тестеров? Мне кажется, что комплексные тесты обходятся дороже: я не могу позволить себе запускать их так часто, как модульные тесты, потому что они просто занимают больше времени.

Итак, мой вопрос: как я могу тестировать функции, которые взаимодействуют с DOM? Я нашел эту страницу в вики Jest, где объясняется, как тестировать код JQuery. Но я не знаю, как тестировать свои собственные функции (без участия jQuery).

Например, у меня есть функция, которая добавляет новый div к body документа и возвращает вновь созданный элемент div.

let add = function() {

  let div = createElement('div');
  div.innerHTML = '<div class="newElement">Hello World</div>';

  document.querySelector('body').appendChild(div)
  return div

}

Как я могу проверить это действительно:

• add() возвращает экземпляр HTMLElement и
• элемент div с именем класса newElement существует в DOM.

Answer 1

Jest использует jsdom в качестве тестовой среды по умолчанию, поэтому обычные глобальные переменные браузера доступны из коробки.

Пожалуйста, смотрите https://facebook.github.io/jest/docs/en/configuration.html#testenvironment-string

Answer 2

Я только что нашел решение, тестирующее некоторый код. Я не думал, что это сработает с Джестом из коробки. Мы можем получить доступ к DOM с помощью document!

Вот файлы:

add.js:

let add = function() {

    let div = document.createElement('div');
    div.innerHTML = '<div class="newElement">Hello World</div>';

    document.querySelector('body').appendChild(div)
    return div
}

module.exports = add;

add.test.js:

const add = require('./add');

test('add() returns a HTML element', () => {

    expect(add()).toBeInstanceOf(HTMLElement)

})


it('a() creates a div with class name newElement', () => {

    add()
    let textContent = document.querySelector('.newElement').textContent
    expect(textContent).toBe('Hello World')

})

Набрав в командной строке npm jest, он возвращает:

Кто-нибудь знает, почему это работает? JestJS создает пустой документ для тестирования?