CRA Jest setup tests file with window.mediaMatch a simple mock

setupTests.js

/**
 * window.matchMedia mock
 * 
 * it also exposes a custom global method called setMatchMediaProperties
 * that accepts an object as parameter to merge with the default MatchMedia properties.
 */
(function matchMediaMock() {
  const defaultMatchMedia = {
    matches: false,
    addListener() {},
    removeListener() {}
  };

  if (!global.matchMedia) {
    global.matchMedia = () => (defaultMatchMedia);
  }

  global.setMatchMediaProperties = properties => {
    global.matchMedia = () => Object.assign({}, defaultMatchMedia, properties);
  };
}())

Example usage testing a React Component with Jest:

import React from 'react';
import { mount } from 'enzyme';

import MobileVersionOfComponent from '../MobileVersionOfComponent';
import DesktopVersionOfComponent from '../DesktopVersionOfComponent';
import ResponsiveVersionOfComponent from './';

describe('<ResponsiveVersionOfComponent />', () => {
  it('should render DesktopVersionOfComponent when media query matches', () => {
    /** sets global `matches` to true */
    global.setMatchMediaProperties({ matches: true });

    /** render component */
    const wrapper = mount(<ResponsiveVersionOfComponent />);

    /** assert correct component was rendered */
    expect(wrapper.find(DesktopVersionOfComponent).exists()).toBeTruthy();
  });

  it('should render MobileVersionOfComponent when media query doesnt matches', () => {
    /** sets global `matches` to false */
    global.setMatchMediaProperties({ matches: false });
    
    /** render component */
    const wrapper = mount(<ResponsiveVersionOfComponent />);

    /** assert correct component was rendered */
    expect(wrapper.find(MobileVersionOfComponent).exists()).toBeTruthy();
  });
});