title: React testing library cannot find any components used inside react-responsive media queries
body: <p>I am using react-responsive to display some elements inside a react component. I have an integration test that takes a snapshot of the app, but the snapshot shows me an empty span where the media query component should be. It's as if the testing library doesn't know how to use react-responsive media queries because if I comment the media queries out and replace with a simple span then the snapshot will print that.</p>
  
  <p>I have looked through docs online but have not found a solution that works.</p>
  
  <p>Tried adding this to the top of test file:</p>
  
  <pre><code>global.window.matchMedia = jest.fn().mockReturnValue({
  matches: true,
  addListener: () =&gt; {},
  removeListener: () =&gt; {},
  </code></pre>
  
  <p>});</p>
  
  <p>This is an example of the component that uses react-responsive:</p>
  
  <pre><code>const AutoInfo = ({ vehicle }) =&gt; {
    return (
      &lt;&gt;
        &lt;MediaQuery maxWidth={599}&gt;
          {&lt;span&gt;Contents to be shown at Mobile&lt;/span&gt;}
        &lt;/MediaQuery&gt;
        &lt;MediaQuery minWidth={600}&gt;
          {&lt;span&gt;Contents to be shown at Desktop&lt;/span&gt;}
        &lt;/MediaQuery&gt;
      &lt;/&gt;
    );
  };
  </code></pre>
  
  <p>This is where in the app I am using the VehicleInfo component:</p>
  
  <pre><code>&lt;Field name={name}&gt;
    {({ field }) =&gt; (
      &lt;VisualCheckbox
        {...field}
        checked={field.value}
        onChange={handleOnChange(field, onChange)}
        disabled={!field.value &amp;&amp; !allowMoreVehicles}
      &gt;
        &lt;IconAuto label={&lt;AutoInfo vehicle={vehicle} /&gt;} /&gt;
      &lt;/VisualCheckbox&gt;
    )}
  &lt;/Field&gt;
  </code></pre>
  
  <p>This is the rendered markup from the snapshot. This works as expected in the browser, however the snapshot does not render the markup, instead it prints out an empty span where I expect to see my formatted text:</p>
  
  <pre><code>&lt;span class="lm-Icon-label lm-Icon--label" /&gt;
  </code></pre>