在Jest和普通JavaScript中针对DOM进行测试

假设我有一个组件，当调用

render（）

时，该组件被渲染并装载到DOM节点上：

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（）

的行为，因为它们返回HtmleElement对象，并且我可以对各种属性进行断言

但是如何测试顶级

render（）

方法的行为呢？这不会返回任何内容，而是将其内容呈现到DOM中

Jest支持定义要测试的DOM吗

如何处理对DOM的更新（例如，测试在单击事件后DOM是否更改）

谢谢

Jest支持定义要测试的DOM吗

是的，是的！实际上，Jest已经附带了一个DOM实现，名为

如何处理对DOM的更新

尽管并非所有的domapi都是在jsdom中实现的，但是考虑到您的用例，您应该能够像在浏览器控制台中一样检查DOM树

因此，使用Jest的开箱即用的产品，您可以创建DOM元素，断言它们的状态，运行更新，然后重新声明DOM状态已更改