title: Jest and React Testing Library, how to test if an element is hidden?
body: <p>I have a popover showing on Hover and I want to test it with Jest and React Testing Library to see if the element is hidden by default.</p>
  <p>When I test manualy everything is ok by not when I test it with RTL.</p>
  <p>I tried using not.toBeInTheDocument and not.toBeVisible but it seems that the element is always present in the DOM, any idea of how could I remove it from the DOM</p>
  <p>JSX code:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;label
    htmlFor=&quot;terms_and_conditions&quot;
    className=&quot;terms_and_conditions_box&quot;
  &gt;
    I agree with{&quot; &quot;}
    &lt;span className=&quot;terms_and_conditions_text&quot; style={{ color: &quot;blue&quot; }}&gt;
      Terms and conditions
    &lt;/span&gt;
    &lt;div className=&quot;pop_over&quot;&gt;No ice cream will be delivered&lt;/div&gt;
  &lt;/label&gt;
  </code></pre>
  <p>CSS code:</p>
  <pre class="lang-css prettyprint-override"><code>.terms_and_conditions_text:hover + .pop_over {
    display: block;
  }
  
  .pop_over {
    background: rgb(199, 196, 196);
    padding: 2rem;
    width: 14rem;
    border-radius: 15px;
    position: absolute;
    right: -18rem;
    top: -2rem;
    display: none;
  }
  </code></pre>
  <p>TEST code:</p>
  <pre class="lang-js prettyprint-override"><code>test(&quot;popover responds to hover&quot;, () =&gt; {
    render(&lt;SummaryForm /&gt;);
  
    //* popover initially is hidden
    const nullPopover = screen.queryByText(/No ice cream will be delivered/i);
    expect(nullPopover).not.toBeInTheDocument();
  });
  </code></pre>