{"repo":"Ayc0/mock-match-media","free":true,"listed":false,"github":"https://github.com/Ayc0/mock-match-media","clone":"git clone https://github.com/Ayc0/mock-match-media.git","description":"Mock window.matchMedia for Node.JS environments (like tests or NextJS)","language":"JavaScript","stars":22,"topics":["matchmedia","mock","jest","test","listeners","nextjs","nodejs"],"license":"MIT","category":"saas-starters-boilerplates","readme_excerpt":"Simple server-side compatible substitution for window.matchMedia() based on media-query-fns. 1. What is mock-match-media ? 2. Usage 1. Listeners 2. Cleanup 1. cleanupListeners 2. cleanupMedia 3. cleanup 3. Polyfill 4. Other features 1. once event listeners 2. .dispatchEvent \\& MediaQueryListEvent 3. .onchange 4. Interactions between multiple listeners 5. ESM 3. How to use with other libraries 1. Jest 2. NextJS What is mock-match-media ? mock-match-media is a ponyfill for window.matchMedia but for Node. This mock is fully compliant with the spec (see doc on MDN or Other features). We currently requires at least Node v20.19.0 to be able to require(ESM) It's also coded in TypeScript. Usage Listeners mock-match-media also supports even listeners: Cleanup mock-match-media provides 3 cleanup functions: cleanupListeners cleanupListeners clears all listeners called via matchMedia().addListener() or matchMedia().addEventListener() (to avoid calling in side effects). cleanupMedia cleanupMedia resets the state of the window set via setMedia() . cleanup cleanup at the same time clears all listeners (like cleanupListeners ), and clears the state of the window (like cleanupMedia ). Polyfill If you don't want to change your code or to setup mocks with your testing library, you can do: And then global variables matchMedia and MediaQueryListEvent will be set. And thus, you won't have to import those (you'll still have to import setMedia , and the cleanup functions). Other features This librar","default_branch":null,"files":null,"tree":[],"storefront":"/r/Ayc0","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/Ayc0/mock-match-media/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}