title: Cannot check expect(elm).not.toBeVisible() for semantic-ui react component
body: <p>I'm trying to test a react component and use <code>expect(elm).not.toBeVisible()</code> without success.</p>
  
  <p><strong>Update 3</strong></p>
  
  <p>I have cut down the code into this simpler form:</p>
  
  <pre><code>// ./TestItem.js
  import React from 'react'
  import './TestItem.css'
  
  export default ({ hide }) =&gt; {
    return &lt;div className={hide ? 'shouldHide' : ''}&gt;Text&lt;/div&gt;
  }
  
  // ./__tests__/TestItem.test.js
  import React from 'react'
  import { render } from 'react-testing-library'
  import TestItem from '../TestItem'
  import 'jest-dom/extend-expect'
  import 'react-testing-library/cleanup-after-each'
  
  
  test.only('TestItem should render correctly', async () =&gt; {
    const { getByText, debug } = render(&lt;TestItem hide={true} /&gt;)
    const itemNode = getByText('Text')
    debug()
    expect(itemNode).not.toBeVisible()
  })
  
  // ./TestItem.css
  .shouldHide {
    display: none;
  }
  </code></pre>
  
  <p>Test result:</p>
  
  <pre><code> TestItem should render correctly
  
      expect(element).not.toBeVisible()
  
      Received element is visible:
        &lt;div class="shouldHide" /&gt;
  
         7 |   const itemNode = getByText('Text')
         8 |   debug()
      &gt;  9 |   expect(itemNode).not.toBeVisible()
           |                        ^
        10 | })
        11 |
  </code></pre>
  
  <p><code>debug()</code> log:</p>
  
  <pre><code>console.log node_modules/react-testing-library/dist/index.js:58
      &lt;body&gt;
        &lt;div&gt;
          &lt;div
            class="shouldHide"
          &gt;
            Text
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p><strong>Update 2:</strong></p>
  
  <p>Okay it's getting pretty weird because I got the test to pass on <a href="https://codesandbox.io/s/21k3yyn14j?expanddevtools=1&amp;module=%2Fsrc%2F__tests__%2FComboItem.test.js&amp;moduleview=1&amp;previewwindow=tests" rel="noreferrer">codesanbox</a> but still find no luck on my local machine.</p>
  
  <hr>
  
  <p><strong>My original question:</strong></p>
  
  <p>I use React, semantic-ui-react and react-testing-library.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>// ComboItem.test.js    
  import React from 'react'
  import ComboItem from '../ComboItem'
  import { render } from 'react-testing-library'
  import comboXoi from '../images/combo-xoi.jpg'
  import 'path/to/semantic/semantic.min.css'
  
  describe('ComboItem', () =&gt; {
    test('should render', async () =&gt; {
      const { getByText, debug } = render(
        &lt;ComboItem image={comboXoi} outOfStock={false} /&gt;
      )
      const outOfStockNotice = getByText('Out of stock')
      debug()
      expect(outOfStockNotice).not.toBeVisible()
    })
  })
  
  // ComboItem.js
  import React from 'react'
  import { Card, Image } from 'semantic-ui-react'
  
  export default ({ image, outOfStock = false }) =&gt; {
    return (
      &lt;Card&gt;
        &lt;Image
          src={image}
          dimmer={{
            active: outOfStock,
            inverted: true,
            'data-testid': 'combo-item-dimmer',
            content: (
              &lt;span style={{ marginTop: 'auto', color: 'black' }}&gt;
                 Out of stock
              &lt;/span&gt;
            ),
          }}
        /&gt;
      &lt;/Card&gt;
    )
  }
  </code></pre>
  
  <p>What i get is the result here:</p>
  
  <pre><code>ComboItem › should render
  
      expect(element).not.toBeVisible()
  
      Received element is visible:
        &lt;span style="margin-top: auto; color: black;" /&gt;
  
        at Object.test (src/app/screens/App/screens/SaleEntries/screens/CreateSaleEntry/screens/StickyRiceComboSelect/__tests__/ComboItem.test.js:14:34)
        at process._tickCallback (internal/process/next_tick.js:68:7)
  </code></pre>
  
  <p>I have tried to see the component render result on the browser and the node <code>outOfStockNotice</code> in the test code is actually hidden because its parent, which is a div with class <code>dimmer</code> has style <code>display: none</code>.</p>
  
  <p>According to <code>jest-dom</code> doc (which is used by <code>testing-react-library</code>:</p>
  
  <blockquote>
    <p>toBeVisible</p>
    
    <p>An element is visible if all the following conditions are met:</p>
    
    <ul>
    <li>it does not have its css property display set to none</li>
    <li>it does not have its css property visibility set to either hidden or collapse</li>
    <li>it does not have its css property opacity set to 0</li>
    <li>its parent element is also visible (and so on up to the top of the DOM tree)</li>
    </ul>
  </blockquote>
  
  <p>Please help. I really don't know what could go wrong here.</p>
  
  <p><strong>Update:</strong></p>
  
  <p>I include the result of <code>debug()</code> here:</p>
  
  <pre><code>console.log node_modules/react-testing-library/dist/index.js:58
        &lt;body&gt;
          &lt;div&gt;
            &lt;div
              class="ui card"
            &gt;
              &lt;div
                class="ui image"
              &gt;
                &lt;div
                  class="ui inverted dimmer"
                  data-testid="combo-item-dimmer"
                &gt;
                  &lt;div
                    class="content"
                  &gt;
                    &lt;span
                      style="margin-top: auto; color: black;"
                    &gt;
                      Out of stock
                    &lt;/span&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;img
                  src="combo-xoi.jpg"
                /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/body&gt;
  </code></pre>