在 Jest 和纯 JavaScript 中针对 DOM 进行测试答案

【问题标题】：Testing against a DOM in Jest and plain JavaScript在 Jest 和纯 JavaScript 中针对 DOM 进行测试
【发布时间】：2020-06-19 21:58:39
【问题描述】：

假设我有一个组件在调用 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() 的行为，因为它们返回 HTMLElement 对象，并且我可以对各种属性进行断言。

但是如何测试顶级render() 方法的行为呢？这不会返回任何内容，而是将其内容呈现到 DOM 中。

Jest 是否支持定义要测试的 DOM？
我将如何处理对 DOM 的更新（例如，在单击事件后测试 DOM 是否更改）

谢谢！

【问题讨论】：

标签： javascript dom jestjs

【解决方案1】：

Jest 是否支持定义要测试的 DOM？

是的，确实如此！实际上，Jest bundled 已经带有一个 DOM 实现，称为 jsdom。

我将如何处理对 DOM 的更新

虽然不是所有的 DOM API 都在 jsdom 中实现，但根据您的用例，您应该能够像在浏览器控制台中一样检查 DOM 树。

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

【讨论】：