reactjs - 在React + Enzyme中模拟clientHeight和scrollHeight进行测试

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

基本上：

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在render方法中设置如下：

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

我想使用Jest + Enzyme测试这种逻辑。

我需要一种方法来强制将clientHeight，scrollHeight和scrollTop属性设置为我为测试方案选择的值。

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

任何建议，将不胜感激！

最佳答案

Jest spyOn可用于模拟版本22.1.0及更高版本的getter和setter。见jest docs

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

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

它返回100作为scrollHeight值。

关于reactjs - 在React + Enzyme中模拟clientHeight和scrollHeight进行测试，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47823616/