在 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 已经捆绑了一个名为jsdom的 DOM 实现。我将如何处理对 DOM 的更新尽管不是所有的 DOM API 都在 jsdom 中实现，但是根据您的用例，您应该能够像在浏览器控制台中一样检查 DOM 树。因此，使用 Jest 的开箱即用产品，您可以创建 DOM 元素、断言它们的状态、运行更新，然后重新断言 DOM 状态已更改。