Тестирование DOM на Jest и обычном JavaScript

Question

Скажем, у меня есть компонент, который визуализируется, а затем монтируется на узел DOM, когда вызывается render():

render() {

  // Render the HTML elements

  const content = renderParent();

  // Mount onto the DOM element with id `app`;

  let element = document.getElementById('app');
  element.innerHTML = '';
  element.appendChild(div);

}

renderParent() {
  const div = document.createElement('div');
  div.classList.add('foo', 'bar');

  div.innerHTML = renderChild();
  return div
}

renderChild() {
  const span = document.createElement('span');
  span.innerText = 'ayyy lmao';

  return span;
}

export { render }

(Вышеупомянутое упрощено. На самом деле, есть слои вложенных дочерних компонентов, распределенных по несколько файлов и элементы более сложные)

Я новичок в использовании Jest и JavaScript, и я хотел использовать Jest для написания тестов.

Я могу легко проверить поведение renderParent() и renderChild(), потому что они возвращают объекты HTMLElement, и я могу делать утверждения о различных свойствах.

Но как мне проверить поведение метода render() верхнего уровня? Это ничего не возвращает, а вместо этого отображает его содержимое в DOM.

1. Поддерживает ли Jest определение DOM для тестирования?
2. Как мне обрабатывать обновления DOM (например, проверка того, что DOM изменилась после события щелчка)

Спасибо!

Answer 1

Поддерживает ли Jest определение DOM для тестирования?

Да, это так! Фактически, Jest поставляется в комплекте с уже реализацией DOM, называемой jsdom .

Как мне обрабатывать обновления DOM

Хотя не все DOM API реализованы в jsdom, с учетом вашего варианта использования вы должны иметь возможность просто проверять дерево DOM так же, как в консоли браузера.

Таким образом, с помощью готового предложения Jest вы можете создавать элементы DOM, подтверждать их состояние, запускать обновление, а затем повторно подтверждать, что состояние DOM изменилось.