Question

假设我的组件已渲染，然后在调用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更新（例如，测试click事件后DOM是否发生了变化）

谢谢！

Answer 1

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

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

我将如何处理DOM更新

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

因此，使用Jest的现成产品，您可以创建DOM元素，声明其状态，运行更新，然后重新确定DOM状态已更改。

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

1 个答案: