title: Mocking clientHeight and scrollHeight in React + Enzyme for test
body: <p>We have a React component called ScrollContainer than calls a prop function when its content is scrolled to the bottom.</p>
  
  <p>Basically:</p>
  
  <pre class="lang-js prettyprint-override"><code>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()
    }
  }
  </code></pre>
  
  <p><code>this.container</code> is set as follows in the render method:</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;div ref={ container =&gt; this.container = container }&gt;
    ...
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to test this logic using Jest + Enzyme.</p>
  
  <p>I need a way to force the clientHeight, scrollHeight and scrollTop properties to be values of my choosing for the test scenario. </p>
  
  <p>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 <code>wrapper.instance().container = { scrollHeight: 0 }</code> and etc, but this only modifies the test context not the actual component.</p>
  
  <p>Any suggestions would be appreciated!</p>