在 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 中。Jest 是否支持定义要测试的 DOM？我将如何处理对 DOM 的更新（例如，在单击事件后测试 DOM 是否更改）谢谢！

Answer 1

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

是的，它确实！实际上，Jest 已经捆绑了一个名为jsdom的 DOM 实现。

我将如何处理对 DOM 的更新

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

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