npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

jest-matchmedia-mock

v1.1.0

Published

Mock for fully testing any media queries with Jest

Downloads

201,861

Readme

🃏 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.addListener(ev => ev.matches && firstListener());
    mql.addListener(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