title: How to test styles and media queries rendered by a React component with Jest and/or Enzyme
body: <p>I'm using <code>styled-components</code> to develop a framework that my company will use internally. We need to create new responsive components and when I test this in a browser, I can see how the rendered component changes its background-color when I resize the window. I'm trying to achieve the same programatically and test the functionality with Jest and/or Enzyme, but I've got no success so far. Anybody knows?</p>
  
  <p>This is the code for the component:</p>
  
  <pre><code>const Component = styled.div`
      height: 200px;
      width: 200px;
  
      background-color: purple;
  
      @media (max-width: ${DESKTOP}px) {
          background-color: purple;
      }
  
      @media (max-width: ${TABLET}px) {
          background-color: yellow;
      }
  
      @media (max-width: ${MOBILE}px) {
          background-color: red;
      }
  `
  </code></pre>
  
  <p>I wrote the following tests using <code>toHaveStyleRule</code> from the <code>jest-styled-components</code> package. Tests are passing because they effectively verify that 'background-color' is 'red' for the MOBILE media query, and so on. </p>
  
  <pre><code>expect(&lt;Component /&gt;).toHaveStyleRule(
      { 'background-color': 'red' },
      { media: `(max-width: ${MOBILE}px)` }
  )
  
  expect(&lt;Component /&gt;).toHaveStyleRule(
      { 'background-color': 'yellow' },
      { media: `(max-width: ${TABLET}px)` }
  )
  
  expect(&lt;Component /&gt;).toHaveStyleRule(
      { 'background-color': 'blue' },
      { media: `(max-width: ${DESKTOP}px)` }
  )
  </code></pre>
  
  <p>However, tests fail if I resize the window doing <code>window.resizeTo(250, 250)</code>, because I expect the component to look red and instead, 'background-color' always seem to be 'purple'</p>
  
  <p>For resizing window, I use  and I've been trying this snippet with JSDOM: <a href="https://gist.github.com/javierarques/d95948ac7e9ddc8097612866ecc63a4b" rel="nofollow noreferrer">https://gist.github.com/javierarques/d95948ac7e9ddc8097612866ecc63a4b</a></p>
  
  <p>Any clue? Thanks in advance!</p>