I am using react-responsive to display some elements inside a react ponent. I have an integration test that takes a snapshot of the app, but the snapshot shows me an empty span where the media query ponent should be. It's as if the testing library doesn't know how to use react-responsive media queries because if I ment the media queries out and replace with a simple span then the snapshot will print that.

I have looked through docs online but have not found a solution that works.

Tried adding this to the top of test file:

global.window.matchMedia = jest.fn().mockReturnValue({
matches: true,
addListener: () => {},
removeListener: () => {},

});

This is an example of the ponent that uses react-responsive:

const AutoInfo = ({ vehicle }) => {
  return (
    <>
      <MediaQuery maxWidth={599}>
        {<span>Contents to be shown at Mobile</span>}
      </MediaQuery>
      <MediaQuery minWidth={600}>
        {<span>Contents to be shown at Desktop</span>}
      </MediaQuery>
    </>
  );
};

This is where in the app I am using the VehicleInfo ponent:

<Field name={name}>
  {({ field }) => (
    <VisualCheckbox
      {...field}
      checked={field.value}
      onChange={handleOnChange(field, onChange)}
      disabled={!field.value && !allowMoreVehicles}
    >
      <IconAuto label={<AutoInfo vehicle={vehicle} />} />
    </VisualCheckbox>
  )}
</Field>

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:

<span class="lm-Icon-label lm-Icon--label" />

I am using react-responsive to display some elements inside a react ponent. I have an integration test that takes a snapshot of the app, but the snapshot shows me an empty span where the media query ponent should be. It's as if the testing library doesn't know how to use react-responsive media queries because if I ment the media queries out and replace with a simple span then the snapshot will print that.

I have looked through docs online but have not found a solution that works.

Tried adding this to the top of test file:

global.window.matchMedia = jest.fn().mockReturnValue({
matches: true,
addListener: () => {},
removeListener: () => {},

});

This is an example of the ponent that uses react-responsive:

const AutoInfo = ({ vehicle }) => {
  return (
    <>
      <MediaQuery maxWidth={599}>
        {<span>Contents to be shown at Mobile</span>}
      </MediaQuery>
      <MediaQuery minWidth={600}>
        {<span>Contents to be shown at Desktop</span>}
      </MediaQuery>
    </>
  );
};

This is where in the app I am using the VehicleInfo ponent:

<Field name={name}>
  {({ field }) => (
    <VisualCheckbox
      {...field}
      checked={field.value}
      onChange={handleOnChange(field, onChange)}
      disabled={!field.value && !allowMoreVehicles}
    >
      <IconAuto label={<AutoInfo vehicle={vehicle} />} />
    </VisualCheckbox>
  )}
</Field>

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:

<span class="lm-Icon-label lm-Icon--label" />

• javascript
• react-testing-library

• That span looks like the rendered version of IconAuto. Isn't that what you want to render? – Gio Polvara Commented Jul 24, 2019 at 7:47
• Thanks for the response. I am expecting to see the <AutoInfo vehicle={vehicle} /> ponent rendered out there which should be a span with text. If I remove the <MediaQuery ...></MediaQuery> wrapper from that ponent it works fine. This leads me to believe its an issue with react-responsive Media Queries, or possibly with react testing library itself. – keyboard-warrior Commented Jul 24, 2019 at 15:10

1 Answer 1

I hope this helps someone else with similar issue.

I figured out the problem. First, I needed to add this in the beforeEach() section of my tests:

window.matchMedia('(max-width: 599px)');

Then I had to mock this matchMedia() function like so:

global.window.matchMedia = jest.fn().mockReturnValue({
  matches: true,
  addListener: () => {},
  removeListener: () => {},
  addEventListener: () => {},
  removeEventListener: () => {},
});

Apparently by default the testing library has no concept of how wide the browser window is, so by adding this it now renders whatever was inside my MediaQuery ponent that has a max-width: 599px! Although in my snapshot it actually rendered the contents of both media queries (max-width: 599px AND min-width: 600px) but at least I was able to render the contents and fix my test.