title: how can I test if useState hook has been called with jest and react testing library?
body: <p>I have this component that I would like to test using Jest and React testing library : </p>
  
  <pre><code>export function GenericDivider({ stepsHeader = [], componentsFactory = [] }) {
     const [currentPage, changePage] = useState(0);
     const Component = componentsFactory[currentPage] || (() =&gt; &lt;&gt;&lt;/&gt;);
  
     return (
      &lt;div className="container page__container"&gt;
            ...
                   &lt;a
                     href="#"
                     key={name}
                     onClick={e =&gt; {
                       e.preventDefault();
                       if (index &lt; componentsFactory.length) changePage(index);
                     }}
                     className={`nav-link ${currentPage === index &amp;&amp; 'active'}`}
                   &gt;
                     {name}
                   &lt;/a&gt;
            ...
      &lt;/div&gt;
     );
  }
  
  export default memo(GenericDivider);
  </code></pre>
  
  <p>I would like to test if changePage is called when I fire a click, is there a way i can do that using Jest and React testing library ? </p>
  
  <p>I'm new to testing and I tried this but it doesn't seem to work</p>
  
  <pre><code>it('Should call changePage when button clicked', () =&gt; {
      const changePage = jest.fn();
  
      const { container } = render(
        &lt;GenericDivider
          stepsHeader={['hamid', 'walid', 'khalid']}
          componentsFactory={[() =&gt; &lt;&gt;&lt;/&gt;, () =&gt; &lt;&gt;&lt;/&gt;, () =&gt; &lt;&gt;&lt;/&gt;]}
        /&gt;,
      );
  
      const button = container.querySelector('a');
      fireEvent.click(button);
      expect(changePage).toHaveBeenCalled();
    });
  </code></pre>