title: How can I get a current media query value using React Testing Library
body: <p>I have written a React test to verify how many articles are visible inside a container...</p>
  <pre><code>    const resizeWindow = (x: number, y: number): void =&gt; {
          window.innerWidth = x;
          window.innerHeight = y;
          window.dispatchEvent(new Event('resize'));
      };   
   
      it(&quot;On a wide screen show all four articles&quot;, async () =&gt; {
          expect.assertions(4);
  
          resizeWindow(2000, 2000);
          const {matches:is1600pxWide} = window.matchMedia('(min-width: 1600px)');
          render(
              &lt;StatefulNewsPanel
                  activeNewsItems={[mockNewsItem,mockNewsItem,mockNewsItem,mockNewsItem]}
                  activeNewsViewAllUrl=&quot;http://news-url&quot;
                  language={Language.ENGLISH}
              /&gt;
          );
          expect(screen.getAllByTestId(TEST_ID_ARTICLE)[0]).toHaveStyle(&quot;display: flex&quot;);
          expect(screen.getAllByTestId(TEST_ID_ARTICLE)[1]).toHaveStyle(&quot;display: flex&quot;);
          expect(screen.getAllByTestId(TEST_ID_ARTICLE)[2]).toHaveStyle(&quot;display: flex&quot;);
          expect(screen.getAllByTestId(TEST_ID_ARTICLE)[3]).toHaveStyle(&quot;display: flex&quot;);
      });
  </code></pre>
  <p>The [simplified] component code is as follows...</p>
  <pre><code>&lt;ArticleBar&gt;
    &lt;Article data-testid={TEST_ID_ARTICLE}&gt;
      // Some content
    &lt;/Article&gt;
    &lt;Article data-testid={TEST_ID_ARTICLE}&gt;
      // Some content
    &lt;/Article&gt;
    &lt;Article data-testid={TEST_ID_ARTICLE}&gt;
      // Some content
    &lt;/Article&gt;
    &lt;Article data-testid={TEST_ID_ARTICLE}&gt;
      // Some content
    &lt;/Article&gt;
  &lt;/ArticleBar&gt;
  </code></pre>
  <p>Each  has the follow style properties applied through theme-ui:</p>
  <pre><code>{
    &quot;:nth-of-type(3)&quot;: {
      display: [&quot;none&quot;, ...nullBreaks, &quot;flex&quot;],
    },
    &quot;:nth-of-type(4)&quot;: {
      display: [&quot;none&quot;, ...nullBreaks, &quot;flex&quot;],
    }
  }
  </code></pre>
  <p>Which outputs the following css for each article...</p>
  <pre><code>.css-gaz7ph-Article:nth-of-type(3){
    display:none;
  }
  @media screen and (min-width:1600px){
    .css-gaz7ph-Article:nth-of-type(3){
      display:flex;
    }
  }
  .css-gaz7ph-Article:nth-of-type(4){
    display:none;
  }
  @media screen and (min-width:1600px){
    .css-gaz7ph-Article:nth-of-type(4){
      display:flex;
    }
  }
  </code></pre>
  <p>Below 1600px the third and fourth article are set to display none. Despite logging the innerWidth after the resize and confirming it is 2000px the test fails claiming the last two articles are display none despite they are visible when I view the component after npm run start.</p>
  <p>Why are the values applied by the media query ignored in the test?</p>