Use Scroll and Width in JSDOM

Question

我正在尝试为组件编写一个测试用例，该测试用例检查如果在窗口对象上触发滚动，是否调用绑定到组件的函数。这没有使用 React 框架，尽管我使用 JEST 作为我的测试框架，它使用 JSDOM，因为它非常好而且快。

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

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

我尝试了一些不起作用的事情：

1. global.document.dispatch(new Event('scroll'))（这是在调整滚动位置后完成的）

2. 在渲染包含大约 19 个元素的组件li（每个 li 元素都有一个 10x10 px 图像和标题）后，我尝试检查组件的高度以滚动到该位置，但不幸的是一切都变成了 0。

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

Answer 1

Jsdom不进行任何布局，只能伪装成一个可视化浏览器。默认设置是这样设置document.hidden来表明这一点，但是像 Jest 这样的测试环境的集成会明确告诉 jsdom 撒谎并假装是一个可视化浏览器。

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

实现此目的的一种方法是对于某些值始终返回 0，例如getClientBoundingRect()or中的属性scrollTop。

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

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

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

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