{"_id":"@deanwhillier/jest-matchmedia-mock","_rev":"1-d6a838f6efcf9a3c90b8be52f4644c9c","name":"@deanwhillier/jest-matchmedia-mock","dist-tags":{"latest":"1.2.0"},"versions":{"1.2.0":{"name":"@deanwhillier/jest-matchmedia-mock","description":"Mock for fully testing any media queries with Jest","version":"1.2.0","license":"MIT","author":{"name":"Kirill Dyakov"},"repository":{"type":"git","url":"git+https://github.com/dyakovk/jest-matchmedia-mock.git"},"bugs":{"url":"https://github.com/dyakovk/jest-matchmedia-mock/issues"},"homepage":"https://github.com/dyakovk/jest-matchmedia-mock#readme","keywords":["jest","mock","jest-mock","jest-matchmedia","matchmedia-mock","window.matchmedia","mediaquery","media query mock","typescript"],"engines":{"node":">=10"},"main":"./dist/matchmedia-mock.js","types":"./dist/matchmedia-mock.d.ts","scripts":{"compile":"rimraf ./dist/ && tsc -p ./tsconfig.prod.json","lint":"eslint ./src/ --ext ts","test":"jest ./src/ --config ./jest.config.json","test:coverage":"jest --config ./jest.config.json --coverage --coverageReporters=text","test:coveralls":"jest --config ./jest.config.json --coverage --coverageReporters=text-lcov | coveralls"},"peerDependencies":{"jest":">=13"},"devDependencies":{"@commitlint/cli":"^9.1.2","@commitlint/config-conventional":"^9.1.1","@types/jest":"^26.0.8","@typescript-eslint/eslint-plugin":"^3.8.0","@typescript-eslint/parser":"^3.8.0","coveralls":"^3.0.9","eslint":"^7.6.0","eslint-config-airbnb-base":"^14.2.0","eslint-config-prettier":"^6.10.0","eslint-plugin-import":"^2.22.0","eslint-plugin-prettier":"^3.1.2","husky":"^4.2.1","jest":"^26.2.2","lint-staged":"^10.2.11","prettier":"^2.0.5","rimraf":"^3.0.1","ts-jest":"^26.1.4","typescript":"^3.9.7"},"gitHead":"109e79cec3018757495dad6781d38cb057c71a03","_id":"@deanwhillier/jest-matchmedia-mock@1.2.0","_nodeVersion":"17.0.1","_npmVersion":"8.1.0","dist":{"integrity":"sha512-F899zCdQ6ClTHrwD8aRZe8gSRF8YwiE1UXDzskgTzzomkd9ERG0roEXvm6HefVUDfW5OIrc3k935w8iVAJHt/w==","shasum":"9db217218bfd0ae13fdc6a38ad22861f52eefd7a","tarball":"https://registry.npmjs.org/@deanwhillier/jest-matchmedia-mock/-/jest-matchmedia-mock-1.2.0.tgz","fileCount":5,"unpackedSize":12133,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqZ95CRA9TVsSAnZWagAAMgAP/iKKzG+RzQYF2LHSC26H\nqH1tINW5sqmqQUHPsMqtAVG7SwC52b29LTMIUnaHvsdbH3p2m7IJudOuOoB0\nWndITtOAWZfYLHebUc97pfTMkbq3Km0+N3YBhtCPn1WYMyii4E8OVTLlfaTY\n/gd3FBvfPqZR6Cc/Tdn2poRi5eSBE4Rapg0l1VAz7dpimRakeTs5VDEgfg6k\no0uo2f+Ru1/V4D9c2ofoTwIL9K6qkmUJbEhHwvjZ8zPbAl2hxZmt7h4gMHsb\nmO7KApbQ6kN0vZ7xySaOs0jnaPo7DvLgIfUpW3bIDS3rneqA4Qr9TI8BczbZ\nGFpJtJYKaiMuOInnA0MXm6IeHk5Yx44K+Htjti81OuhKrXV1eZIpHMZ515jA\nH9QoRTNHpmMo6mukNp2I4ZplPhjBb+JUDwJ915Pk4T1nrnN+ZFHY/hFwL+al\nwfq4M77Z2IEqGB1hkpw1KWqFiJvSNNxLn2fZV5gvkXOd9FwaJtXtHvYf0/6C\nttzylKxdlRVmFCw642NA+OAqEKjt5whm1QZADpQfPWX9VeWKVkNgnLVAAKrj\nUIcz5hlxtoStLTdQvoDTybMrD4hgsSSFwgIlW2wujuIsMCeY8AoIQPPEzM4A\njVMyeKKx0YDnmPBuAxlfIo6huNdnO5I0XTqgdlKzpiC84lczotsewKbxfaiT\nyOCv\r\n=TitC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgXo6hGAu9e8EspcsU6F/qhgRXLnbKgwsOKzA4nGkt3wIhAL/eop2JXu18vWx1gFbsK+lp3kYT632PMKuMFp3FFCnv"}]},"_npmUser":{"name":"deanwhillier","email":"dean@whillier.com"},"directories":{},"maintainers":[{"name":"deanwhillier","email":"dean@whillier.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/jest-matchmedia-mock_1.2.0_1638506361663_0.43481692007175354"},"_hasShrinkwrap":false}},"time":{"created":"2021-12-03T04:39:21.617Z","1.2.0":"2021-12-03T04:39:21.843Z","modified":"2022-04-05T03:28:04.468Z"},"maintainers":[{"name":"deanwhillier","email":"dean@whillier.com"}],"description":"Mock for fully testing any media queries with Jest","homepage":"https://github.com/dyakovk/jest-matchmedia-mock#readme","keywords":["jest","mock","jest-mock","jest-matchmedia","matchmedia-mock","window.matchmedia","mediaquery","media query mock","typescript"],"repository":{"type":"git","url":"git+https://github.com/dyakovk/jest-matchmedia-mock.git"},"author":{"name":"Kirill Dyakov"},"bugs":{"url":"https://github.com/dyakovk/jest-matchmedia-mock/issues"},"license":"MIT","readme":"# 🃏 MatchMedia Mock for Jest\n\n![Travis (.org)](https://img.shields.io/travis/dyakovk/jest-matchmedia-mock)\n![Coveralls github](https://img.shields.io/coveralls/github/dyakovk/jest-matchmedia-mock)\n![npm](https://img.shields.io/npm/dw/jest-matchmedia-mock)\n![GitHub top language](https://img.shields.io/github/languages/top/dyakovk/jest-matchmedia-mock?label=typescript&logo=typescript)\n![npm type definitions](https://img.shields.io/npm/types/jest-matchmedia-mock)\n![node](https://img.shields.io/node/v/jest-matchmedia-mock)\n![npm peer dependency version](https://img.shields.io/npm/dependency-version/jest-matchmedia-mock/peer/jest)\n\nThis 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.\n\n## Installation\n\nNPM\n\n```bash\nnpm i --save-dev jest-matchmedia-mock\n```\n\nYarn\n\n```bash\nyarn add --dev jest-matchmedia-mock\n```\n\n## Usage\n\n```javascript\nimport MatchMediaMock from 'jest-matchmedia-mock';\n\nlet matchMedia;\n\ndescribe('Your testing module' => {\n  beforeAll(() => {\n    matchMedia = new MatchMediaMock();\n  });\n\n  afterEach(() => {\n    matchMedia.clear();\n  });\n\n  test('Your test case', () => {\n    const mediaQuery = '(prefers-color-scheme: light)';\n    const firstListener = jest.fn();\n    const secondListener = jest.fn();\n    const mql = window.matchMedia(mediaQuery);\n\n    mql.addEventListener(\"change\", ev => ev.matches && firstListener());\n    mql.addEventListener(\"change\", ev => ev.matches && secondListener());\n\n    matchMedia.useMediaQuery(mediaQuery);\n\n    expect(firstListener).toBeCalledTimes(1);\n    expect(secondListener).toBeCalledTimes(1);\n  })\n})\n```\n\nThis 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.\n\nIn 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:\n\n```javascript\nimport matchMedia from './matchMedia.mock.ts'; // Must be imported before the tested file\nimport { myMethod } from './file-to-test';\n\ndescribe('myMethod()', () => {\n  // Test the method here...\n});\n```\n\n## API\n\n### `new MatchMediaMock()`\n\nImplements `window.matchMedia` and returns an instance with methods listed below\n\n### `matchMedia.useMediaQuery()`\n\nUpdates the currently used media query, and calls previously added listener functions registered for the passed media query\n\n- Arguments:\n\n  - `mediaQuery: string;`\n\n- Returns: `never | void`\n\n### `matchMedia.getMediaQueries()`\n\nReturns an array listing the media queries for which the matchMedia has registered listeners\n\n- Returns: `string[]`\n\n### `matchMedia.getListeners()`\n\nReturns a copy of the array of listeners for the passed media query\n\n- Arguments:\n\n  - `mediaQuery: string;`\n\n- Returns: `MediaQueryListener[]`\n\n### `matchMedia.clear()`\n\nClears all registered media queries and their listeners\n\n### `matchMedia.destroy()`\n\nClears all registered media queries and their listeners, and destroys the implementation of `window.matchMedia`\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n\nCopyright (c) 2020-present, Kirill Dyakov\n","readmeFilename":"README.md"}