title: Testing click event in React Testing Library
body: <p>Here is a simple subcomponent that reveals an <code>answer</code> to a question when the button is clicked:</p>
  <pre class="lang-js prettyprint-override"><code>const Question = ({ question, answer }) =&gt; {
      const [showAnswer, setShowAnswer] = useState(false)
      return (
          &lt;&gt;
             &lt;article&gt;
                 &lt;header&gt;
                      &lt;h2 data-testid=&quot;question&quot;&gt;{question}&lt;/h2&gt;
                      &lt;button onClick={() =&gt; setShowAnswer(!showAnswer)}&gt;
                          {
                              !showAnswer ? &lt;FiPlusCircle /&gt; : &lt;FiMinusCircle /&gt;
                          }
                      &lt;/button&gt;
                 &lt;/header&gt;
                 {
                     showAnswer &amp;&amp; &lt;p data-testid=&quot;answer&quot;&gt;{answer}&lt;/p&gt;
                 }
             &lt;/article&gt;
          &lt;/&gt;
      )
  }
  
  export default Question;
  </code></pre>
  <p>I am trying to test that when the <code>button</code> is clicked, the <code>onClick</code> attached is called once and the a <code>&lt;p&gt;</code> element appears on the screen:</p>
  <pre class="lang-js prettyprint-override"><code>const onClick = jest.fn()
  
  test('clicking the button toggles an answer on/off', () =&gt; {
      render(&lt;Question /&gt;);
      
      const button = screen.getByRole('button')
      fireEvent.click(button)
      
      expect(onClick).toHaveBeenCalledTimes(1);
      
      expect(screen.getByTestId('answer')).toBeInTheDocument()
      
      fireEvent.click(button)
  
      expect(screen.getByTestId('answer')).not.toBeInTheDocument()
  
      screen.debug()
      
  })
  </code></pre>
  <p>RTL says that <code>onClick</code> is not called at all (in the UI it is, as the result is as expected)</p>
  <p>Also, if I want to test that this button really toggles the <code>answer</code> element (message should come on and off) how would I test for that?</p>
  <p>If I add another <code>fireEvent.click()</code> to the test (simulating the second click on the button which should trigger the <code>answer</code> element off), and add</p>
  <pre class="lang-js prettyprint-override"><code>expect(screen.getByTestId('answer')).not.toBeInTheDocument()
  </code></pre>
  <p>RTL will just not find that element (which is good, I guess, it means it has been really toggled off the DOM). What assertion would you use for this test to pass for that case?</p>