thinkjrs/jest-matchmedia-mock

🃏 Mock for fully testing any media queries with Jest

🃏 MatchMedia Mock for Jest

This implementation of the window.matchMedia method allows you to control your media queries and their listening functions. You can update the media query that is currently applied to the document by simply calling one function.

Installation

NPM

npm i --save-dev jest-matchmedia-mock

Yarn

yarn add --dev jest-matchmedia-mock

Usage

import MatchMediaMock from 'jest-matchmedia-mock';

let matchMedia;

describe('Your testing module' => {
  beforeAll(() => {
    matchMedia = new MatchMediaMock();
  });

  afterEach(() => {
    matchMedia.clear();
  });

  test('Your test case', () => {
    const mediaQuery = '(prefers-color-scheme: light)';
    const firstListener = jest.fn();
    const secondListener = jest.fn();
    const mql = window.matchMedia(mediaQuery);

    mql.addEventListener("change", ev => ev.matches && firstListener());
    mql.addEventListener("change", ev => ev.matches && secondListener());

    matchMedia.useMediaQuery(mediaQuery);

    expect(firstListener).toBeCalledTimes(1);
    expect(secondListener).toBeCalledTimes(1);
  })
})

This works if window.matchMedia() is used in a function (or method) which is invoked in the test. If window.matchMedia() is executed directly in the tested file, Jest returns TypeError: window.matchMedia is not a function and doesn't properly execute the test.

In this case, the solution is to move the instantiation of the mock into a separate file and include this one in the test before the tested file:

import matchMedia from './matchMedia.mock.ts'; // Must be imported before the tested file
import { myMethod } from './file-to-test';

describe('myMethod()', () => {
  // Test the method here...
});

API

new MatchMediaMock()

Implements window.matchMedia and returns an instance with methods listed below

matchMedia.useMediaQuery()

Updates the currently used media query, and calls previously added listener functions registered for the passed media query

• Arguments:

  • mediaQuery: string;

• Returns: never | void

matchMedia.getMediaQueries()

Returns an array listing the media queries for which the matchMedia has registered listeners

• Returns: string[]

matchMedia.getListeners()

Returns a copy of the array of listeners for the passed media query

• Arguments:

  • mediaQuery: string;

• Returns: MediaQueryListener[]

matchMedia.clear()

Clears all registered media queries and their listeners

matchMedia.destroy()

Clears all registered media queries and their listeners, and destroys the implementation of window.matchMedia

License

MIT

Copyright (c) 2020-present, Kirill Dyakov