在 React + Enzyme 中模拟 clientHeight 和 scrollHeight 进行测试 [英] Mocking clientHeight and scrollHeight in React + Enzyme for test

问题描述

我们有一个名为 ScrollContainer 的 React 组件，当它的内容滚动到底部时，它会调用一个 prop 函数.

基本上:

componentDidMount() {const requiresToScroll = this.container.clientHeight != this.container.scrollHeightconst { handleUserDidScroll } = this.props如果(需要滚动){this.container.addEventListener('scroll', this.handleScroll)} 别的 {handleUserDidScroll()}}componentWillUnmount() {this.container.removeEventListener('scroll', this.handleScroll)}句柄滚动(){const { handleUserDidScroll } = this.propsconst 节点 = this.containerif (node.scrollHeight == node.clientHeight + node.scrollTop) {handleUserDidScroll()}}

this.container 在render方法中设置如下:

this.container = 容器 }>...

我想用 Jest + Enzyme 测试这个逻辑.

我需要一种方法来强制 clientHeight、scrollHeight 和 scrollTop 属性成为我为测试场景选择的值.

使用 mount 而不是浅，我可以获得这些值，但它们始终为 0.我还没有找到任何方法将它们设置为非零值.我可以在 wrapper.instance().container = { scrollHeight: 0 } 等上设置容器，但这只会修改测试上下文而不是实际组件.

任何建议将不胜感激！

解决方案

Jest spyOn 可用于模拟 22.1.0+ 版本的 getter 和 setter.请参阅 jest 文档

我使用下面的代码来模拟 document.documentElement.scrollHeight 的实现

const scrollHeightSpy = jest.spyOn(document.documentElement, 'scrollHeight', 'get').mockImplementation(() => 100);

它返回 100 作为 scrollHeight 值.

We have a React component called ScrollContainer than calls a prop function when its content is scrolled to the bottom.

Basically:

componentDidMount() {
  const needsToScroll = this.container.clientHeight != this.container.scrollHeight

  const { handleUserDidScroll } = this.props

  if (needsToScroll) {
    this.container.addEventListener('scroll', this.handleScroll)
  } else {
    handleUserDidScroll()
  }
}

componentWillUnmount() {
  this.container.removeEventListener('scroll', this.handleScroll)
}

handleScroll() {
  const { handleUserDidScroll } = this.props
  const node = this.container
  if (node.scrollHeight == node.clientHeight + node.scrollTop) {
    handleUserDidScroll()
  }
}

this.container is set as follows in the render method:

<div ref={ container => this.container = container }>
  ...
</div>

I want to test this logic using Jest + Enzyme.

I need a way to force the clientHeight, scrollHeight and scrollTop properties to be values of my choosing for the test scenario.

With mount instead of shallow I can get these values but they are always 0. I have yet to find any way to set them to anything non zero. I can set the container on wrapper.instance().container = { scrollHeight: 0 } and etc, but this only modifies the test context not the actual component.

Any suggestions would be appreciated!

解决方案

Jest spyOn can be used to mock getter and setter from version 22.1.0+. See jest docs

I used below code to mock implementation of document.documentElement.scrollHeight

const scrollHeightSpy = jest
                    .spyOn(document.documentElement, 'scrollHeight', 'get')
                    .mockImplementation(() => 100);

It returns 100 as scrollHeight value.

这篇关于在 React + Enzyme 中模拟 clientHeight 和 scrollHeight 进行测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！