title: How to test CSS properties defined inside a class with react testing library
body: <p>I am trying to test CSS properties that i have defined inside a class in css, wing the react testing library. However I am unable to do so.</p>
  <p>Adding the simplified snippets.</p>
  <pre><code>
  import React from &quot;react&quot;;
  import { render, screen } from &quot;@testing-library/react&quot;;
  import '@testing-library/jest-dom/extend-expect';
  import styled from &quot;styled-components&quot;;
  
  const Title = styled.span`
      display: none;
      background: red;
  `
  
  test(&quot;testRender&quot;, () =&gt; {
  
      render(
          &lt;div&gt;
              &lt;Title&gt;Test&lt;/Title&gt;
          &lt;/div&gt;
      )
  
      const spanElement = screen.getByText(&quot;Test&quot;);
      const elementStyle = window.getComputedStyle(spanElement);
      expect(elementStyle.display).toBe('none');
  });
  </code></pre>
  <p>The test fails at the expect statement. I have tried refactoring to traditional css, there also the test fails. In both cases, I have tested it manually and the styles are taking effect.</p>
  <p>I also understand that we should not directly test CSS properties, but I have tried testing the visibility with toBeVisible(), but that only works if the <code>display: none</code> is directly entered as a style, and not as part of a class.</p>
  <p>This should be a very simple thing, that works out of the box, but I have been at it for some time now, without any luck.</p>
  <p>Any help is appreciated.</p>