title: How can I test a click event which changes a useState state with enzyme?
body: <p>I have the following component:</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  
  import { Button, ThirteenBold } from &quot;@selfdecode/sd-component-library&quot;;
  import { PlayIcon } from &quot;assets/icons&quot;;
  import { TourButtonProps } from &quot;./interfaces&quot;;
  import { WelcomeVideoModal } from &quot;../../modals/welcome-video-modal&quot;;
  
  /**
   * The tour button.
   */
  export const TourButton: React.FC&lt;TourButtonProps&gt; = (props) =&gt; {
    const [isIntroVideoShowing, setIsIntroVideoShowing] = useState(false);
  
    return (
      &lt;&gt;
        &lt;WelcomeVideoModal
          isOpen={isIntroVideoShowing}
          onClickX={() =&gt; setIsIntroVideoShowing(false)}
          data-test=&quot;tour-button-welcome-video&quot;
        /&gt;
  
        &lt;Button
          {...props}
          width={[&quot;max-content&quot;]}
          variant=&quot;tour&quot;
          onClick={() =&gt; setIsIntroVideoShowing(true)}
          data-test=&quot;tour-button&quot;
        &gt;
          &lt;ThirteenBold
            mr={[&quot;12px&quot;]}
            color=&quot;cl_blue&quot;
            width={[&quot;max-content&quot;]}
            letterSpacing={[&quot;1px&quot;]}
            display={[&quot;none&quot;, &quot;block&quot;]}
            textTransform=&quot;uppercase&quot;
          &gt;
            welcome tour
          &lt;/ThirteenBold&gt;
  
          &lt;PlayIcon style={{ height: &quot;30px&quot;, fill: &quot;#4568F9&quot; }} /&gt;
        &lt;/Button&gt;
      &lt;/&gt;
    );
  };
  </code></pre>
  <p>And the test coverage report is complaining that I am not testing both of the onClick events, which change the state.</p>
  <p>I've tried two approaches, and both fail.
  Approach one was to mock the <code>useState</code> and see if it gets called as I'd have expected it.
  This was the test I tried:</p>
  <pre><code> const setState = jest.fn();
   const useStateMock: any = (initState: any) =&gt; [initState, setState];
   jest.spyOn(React, &quot;useState&quot;).mockImplementation(useStateMock);
   
   const button = wrapper.find(`[data-test=&quot;tour-button&quot;]`);
   expect(button).toHaveLength(1);
   button.simulate(&quot;click&quot;);
   expect(setState).toHaveBeenCalled();
  </code></pre>
  <p>This shouldn't even be the final test, as it doesn't check what was the valuee it was called with, but still, it failed because useState wasn't even called.</p>
  <p>The second approach I've tried was to check the prop value on this component:</p>
  <pre><code> &lt;WelcomeVideoModal
      isOpen={isIntroVideoShowing}
      onClickX={() =&gt; setIsIntroVideoShowing(false)}
      data-test=&quot;tour-button-welcome-video&quot;
   /&gt;
  </code></pre>
  <p>And this is the test I've tried</p>
  <pre><code>  test(&quot;Check the isIntroVideoShowing changes to true on buton click&quot;, () =&gt; {
      jest.spyOn(React, &quot;useState&quot;).mockImplementation(useStateMock);
      const button = wrapper.find(`[data-test=&quot;tour-button&quot;]`);
      const welcomeVideo = wrapper.find(
        `[data-test=&quot;tour-button-welcome-video&quot;]`
      );
      expect(button).toHaveLength(1);
      expect(welcomeVideo.prop(&quot;isOpen&quot;)).toEqual(false);
      button.simulate(&quot;click&quot;);
      expect(welcomeVideo.prop(&quot;isOpen&quot;)).toEqual(true);
    });
  </code></pre>
  <p>This one failed claiming it was called with false even after the click.</p>
  <p>Is there a way to make these work? Or a different approach to cover these?</p>