title: React Testing Library: Testing boolean state
body: <p>I am currently writing a test using the testing-library/react package.</p>
  <p>On the second click of my test, the text should not be in the document, but it is.</p>
  <p>Here is the component I am testing:</p>
  <pre><code>import { useState } from 'react'
  import { InfoType } from '../../constants'
  
  type Props = {
      type: InfoType
  }
  
  const HelpWidget = ({ type }: Props) =&gt; {
      const [isHover, setHover] = useState&lt;boolean&gt;(false)
  
      return (
          &lt;div className=&quot;help-widget&quot;&gt;
              &lt;img
                  src={require('../../../public/images/info.svg')}
                  onMouseEnter={() =&gt; setHover(true)}
                  onMouseOut={() =&gt; setHover(false)}
                  onClick={() =&gt; setHover(!isHover)}
              /&gt;
              {isHover ? &lt;div className=&quot;info&quot;&gt;{type}&lt;/div&gt; : &lt;div&gt;&lt;/div&gt;}
          &lt;/div&gt;
      )
  }
  
  export default HelpWidget
  </code></pre>
  <p>Here is the test I wrote:</p>
  <pre><code>import React from 'react'
  import { screen, render, waitFor } from '@testing-library/react'
  import userEvent from '@testing-library/user-event'
  import HelpWidget from '../components/helpWidget/helpWidget'
  
  
  // Testing if the HelpWidget conditionally renders based on the isHover boolean state.
  test('helpWidget conditionally renders to the page', () =&gt; {
      const epk4Post = 'Select a persona to post this'
      render(&lt;HelpWidget type={epk4Post} /&gt;)
      const imageElement = screen.getByRole(&quot;img&quot;)
      userEvent.click(imageElement)
      screen.debug()
      expect(screen.getByText(/select a persona to post this/i)).toBeInTheDocument()
      userEvent.click(imageElement)
      screen.debug()
  });
  </code></pre>
  <p>And here is what I get when I run screen.debug() to see the DOM output. Here you can clearly see that on the second click, the text is still within the document when it should <em><strong>not</strong></em> be:
  <a href="https://i.stack.imgur.com/J6aiA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J6aiA.png" alt="enter image description here" /></a></p>
  <p>Please share your thoughts! Thank you.</p>