title: How can I retrieve the scrollTop value from a ref using Jest and Enzyme in a React functional component?
body: <p>I have an Articles component that renders article boxes. When a box is clicked on the page animates out and the article animates in.</p>
  <p>It saves the scrollTop position in state so that when the article is closed it scrolls back to where the container scroll position from before.</p>
  <p>I'm having trouble writing a test for it though as from my understanding you can't access state values directly in functional components, and spying wouldn't give me the the values right?</p>
  <p>I've been searching and reading various posts and articles about it but I can only seem to find info on mocking the value which i don't need or the scrollTo method which is not what i'm using.</p>
  <p>Essentially the code I have is something along these lines:</p>
  <pre><code>const Articles = ({articlesJsx}) =&gt; {
     const pageContRef = React.useRef(null);
     const currentArticle = useRef(articlesJsx[0]);
     const scrollPos = useRef(0);
     const [articleVisible, setArticleVisible] = useState(false);
  
     const setScrollPos = () =&gt; {
        setTimeout(() =&gt; {
           pageContRef.current.scrollTop = scrollPos.current;
        }, 500);
     };
  
     const scrollToTop = () =&gt; {
        setTimeout(() =&gt; {
           pageContRef.current.scrollTop = 0;
        }, 500);
     };
  
     const handleShowArticle = (index) =&gt; {
        currentArticle.current = articlesJsx[index];
        scrollPos.current = pageContRef.current.scrollTop;
        setArticleVisible(true);
        setTimeout(() =&gt; {
           scrollToTop();
        }, 500);
     };
  
     const closeArticle = () =&gt; {
        setArticleVisible(false);
        setTimeout(() =&gt; {
           setScrollPos();
        }, 500);
     };
  
     return (
        &lt;&gt;
           &lt;div
              className={pageCont}
              data-test=&quot;articlesContainer&quot;
              ref={pageContRef}
           &gt;
              &lt;div className={styles[animDir]}&gt;
                 &lt;CSSTransition
                    in={!articleVisible}
                 &gt;
                    &lt;Hero /&gt;
                    {articlesJsx.map((article, index) =&gt; (
                       &lt;ArticleBox handleShowArticle={() =&gt; handleShowArticle(index)} /&gt;
                    ))}
                 &lt;/CSSTransition&gt;
                 &lt;CSSTransition
                    in={articleVisible}
                    unmountOnExit
                 &gt;
                    &lt;Article
                       content={currentArticle.current} 
                    &gt;
                       &lt;BackArrow handleCloseArticle={closeArticle} /&gt;
                    &lt;Article /&gt;
                 &lt;/CSSTransition&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/&gt;
     );
  };
  </code></pre>
  <p>My test so far:</p>
  <pre><code>describe(&quot;Articles tests&quot;, () =&gt; {
     const articles = articlesData;
     let component;
  
     beforeEach(() =&gt; {
        jest.useFakeTimers();
        const useRefSpy = jest.spyOn(React, &quot;useRef&quot;);
  
        component = mount(
           &lt;Articles articlesJsx={articles} /&gt;
     });
  
     it(&quot;should scroll to the top of the article when viewed&quot;, () =&gt; {
        const articleBox = findByTestAttr(component, &quot;articleBoxMain&quot;);
        let articlesCont = findByTestAttr(component, &quot;articlesContainer&quot;);
  
        articlesCont.simulate(&quot;scroll&quot;, {target: {scrollTop: 100}});
  
        articlesCont = findByTestAttr(component, &quot;articlesContainer&quot;);
  
        act(() =&gt; {
           articleBox.first().simulate(&quot;click&quot;);
        });
  
        act(() =&gt; jest.runAllTimers());
  
        // const scrollTopPosition = articlesCont.......?
  
        expect(scrollTopPosition).toEqual(0);
     });
  });
  </code></pre>
  <p>Enzyme docs say you can find a component through one of its properties but <code>console.log(component.find({scrollTop: 100}).length);</code> comes up as 0.</p>
  <p>As a last resort I tried <code>expect(useRefSpy).toHaveBeenCalledWith(0)</code> but the received value comes up as undefined.</p>
  <p>What is the correct way to test for this?</p>