Window matchMedia

matchMedia() is a function on the window interface which is used for determining if a page matches a given media query.

It also allows you to make an Event handler for when the match state changes.

matchMedia() takes in a media query surrounded by parenthesis as a string, and returns a MediaQueryList.

const mediaQueryList = window.matchMedia("(orientation: portrait)");

That MediaQueryList has a matches boolean property for if the page matches the media query at the time of the function call.

const mediaQueryList = window.matchMedia("(orientation: portrait)");

const isPortrait = mediaQueryList.matches;

It also has a writable onchange method, which is an event handler for a MediaQueryListEvent.

const mediaQueryList = window.matchMedia("(orientation: portrait)");

mediaQueryList.onchange = (e) => {
    console.log("Currently portrait: ", e.matches);
}

Although, you should probably add these as an event handler on the MediaQueryList itself:

const mediaQueryList = window.matchMedia("(orientation: portrait)");

const onMediaChange = (e) => {
    console.log("Currently portrait: ", e.matches);
}

mediaQueryList.addEventListener("change", onMediaChange);

// When you're done with it, remove the event listener
mediaQueryList.removeEventListener("change", onMediaChange);

See Window: matchMedia() method - Web APIs | MDN See MediaQueryList - Web APIs | MDN See MediaQueryList: change event - Web APIs | MDN

Polyfilling

matchMedia is not implemented in JSDOM as of writing.

So, you need to polyfill it for any media queries to work in Jest.

This is particularly useful for MaterialUI, which uses lots of media queries.

Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: jest.fn().mockImplementation(query => ({
    // This is a mock implementation, so you can make the matches
    // field here actually work, or just be static. Up to you!
    matches: true,
    media: query,
    onchange: null,
    addListener: jest.fn(), // deprecated
    removeListener: jest.fn(), // deprecated
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
  })),
});

See Media queries in React for responsive design - Material UI See Manual Mocks · Jest