在 JSDOM 中使用滚动和宽度答案

【问题标题】：Use Scroll and Width in JSDOM在 JSDOM 中使用滚动和宽度
【发布时间】：2018-12-28 06:30:00
【问题描述】：

我正在尝试为一个组件编写一个测试用例，它检查如果在窗口对象上触发滚动，是否调用绑定到组件的函数。这是 不使用反应框架虽然我正在使用JEST 作为我的测试框架，它使用 JSDOM，因为它非常好且速度快。

第一个问题是滚动根本没有被触发。在很多 github 问题中阅读它，但没有运气。

第二个问题是我已将其中一个元素的宽度设置为 1000 像素，这是 jsdom 中使用 jest 的沙盒元素。但是当我在它下面添加另一个元素时，它是渲染组件的结果，getClientBoundingRect 的 DOMElement 函数仍然返回全零。

我尝试了一些不起作用的方法：

global.document.dispatch(new Event('scroll'))（这是在调整滚动位置后完成的）
在渲染包含大约 19 个 li 元素的组件后（每个 li 元素都有一个 10x10 像素的图像和一个标题），我正在尝试检查组件的高度以滚动到该位置，但不幸的是，一切都归零了。

有没有其他方法可以测试或覆盖使用 jsdom/jest 在window.scroll 上调用的函数，我不想使用 phantomjs。

【问题讨论】：

标签： javascript reactjs testing jestjs jsdom

【解决方案1】：

Jsdom 不执行任何布局，只能伪装成可视化浏览器。默认情况下设置 document.hidden 之类的东西来表明这一点，但 Jest 等测试环境的集成明确告诉 jsdom 撒谎并伪装成可视浏览器。

为了实现这一点，他们将模拟与布局、维度、样式、滚动、大小等相关的 API 的许多方面。

这样做的一种方法是始终为某些值返回 0，例如 getClientBoundingRect() 或 scrollTop 中的属性。

它很可能处理了您的事件，并且可能已经触发了自己的一些事件以响应某些更改，但它永远不会滚动，因为它假装渲染的元素的大小没有限制，并且可以不是。 Jsdom 根本不会真正渲染任何东西，它只会将元素作为没有维度的抽象组件来跟踪。

https://github.com/jsdom/jsdom#pretending-to-be-a-visual-browser

至于解决这个问题，这完全取决于您在每种情况下尝试做什么。也许您可以模拟这些测试所需的 API 的一部分，以便它们尝试跟踪滚动位置随着方法被调用或属性更新而发生变化，但是否值得取决于您想花多少时间在嘲笑与测试它的实际重要性。

Jest 能够临时切换用于某些测试的环境，因此您可以仅在需要布局的测试中依赖 PhantomJS。 PhantomJS 将在一个完全能够成为可视化浏览器的单独进程中运行，这有其优点和缺点，（可能不是最新的 API，但它确实执行滚动等实际的视觉更改）。它还可以截取这些更改以进行视觉一致性检查，而 jsdom 仅将标记更改与其快照功能进行真正的比较。

【讨论】：