在Jest和纯JavaScript中测试DOM。

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状态已经改变。