如何测试scorll事件对应的handler呢

Question

比如:
在页面上的某个dom元素的bottom距离页面底部 < 100px时触发某个方法 (对应的场景类似于滚动加载更多)。

那在jest中应该如何写这个用例呢？

Answer 1

ustbhuangyi 2019-06-14 09:46:06

通常滚动加载更多的时候，会派发一个事件。

大致思路就是先用 jest.fn() mock 一个函数，然后监听这个滚动加载更多事件，事件回调函数就是这个 mock 的函数；当然你也要把页面设置足够高，利用 document.documentElement.scrollTop 滚动到页面底部小于 100px 的位置，然后断言这个 mock 函数被调用即可。

• 提问者 慕斯3049357 #1

  老师，请问一下。
  这里说到的 "把页面设置足够高"和 "利用scrollTop滚动"， 是指在jest中操作吗？   虚拟出一个页面，然后 scrollTop？

• ustbhuangyi 回复 提问者 慕斯3049357 #2

  jest 设置了 testEnvironment 为 jsdom 本来就在浏览器环境里跑的，其实你只要想着测试用例就在浏览器里运行，你只是利用 DOM API 做操作。