@deanwhillier/jest-matchmedia-mock
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    🃏 MatchMedia Mock for Jest

    Travis (.org) Coveralls github npm GitHub top language npm type definitions node npm peer dependency version

    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

    Install

    npm i @deanwhillier/jest-matchmedia-mock

    DownloadsWeekly Downloads

    708

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    12.1 kB

    Total Files

    5

    Last publish

    Collaborators

    • deanwhillier