{"library":"mock-match-media","title":"Mock window.matchMedia","description":"mock-match-media is a ponyfill for `window.matchMedia` designed for testing environments and server-side rendering (SSR) in Node.js. It allows developers to simulate various CSS media queries, including advanced Media Queries Level 5 features like range syntax (e.g., `(width < 150px)`), without a browser DOM. The current stable version is `1.0.3`, with releases focused on bug fixes and spec compliance. Key differentiators include its full compliance with the W3C Media Queries Level 5 specification, comprehensive support for event listeners (`addEventListener`, `removeEventListener`, `onchange`, `dispatchEvent`), and utility functions for cleaning up test states. It is written in TypeScript and primarily targets Node.js environments, requiring at least Node v20.19.0 for full ESM compatibility. The library offers both direct import and a polyfill mechanism.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install mock-match-media"],"cli":null},"imports":["import { matchMedia, setMedia, cleanup } from 'mock-match-media';","import { MediaQueryListEvent } from 'mock-match-media';","import 'mock-match-media/polyfill';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { matchMedia, setMedia, cleanup } from 'mock-match-media';\n\n// Reset media state and listeners before each test to ensure isolation\nbeforeEach(() => {\n  cleanup();\n});\n\ndescribe('Media query matching', () => {\n  it('should correctly match simple queries', () => {\n    setMedia({\n      width: 50,\n      type: 'screen',\n      orientation: 'landscape',\n      prefersColorScheme: 'light',\n    });\n\n    expect(matchMedia('(min-width: 250px)').matches).toBe(false);\n    expect(matchMedia('(width > 40px)').matches).toBe(true);\n\n    setMedia({\n      width: 500, // Only redefine changed properties\n    });\n\n    expect(matchMedia('(width > 250px)').matches).toBe(true);\n  });\n\n  it('should support event listeners', () => {\n    const listener = jest.fn();\n    const matcher = matchMedia('(min-width: 250px)');\n\n    matcher.addEventListener('change', listener);\n    setMedia({ width: 100 });\n    expect(listener).not.toHaveBeenCalled(); // matches hasn't changed\n\n    setMedia({ width: 1000 });\n    expect(listener).toHaveBeenCalledWith(expect.objectContaining({ matches: true }));\n    matcher.removeEventListener('change', listener);\n\n    listener.mockClear();\n    setMedia({ width: 100 });\n    expect(listener).not.toHaveBeenCalled(); // listener removed\n  });\n});","lang":"typescript","description":"Demonstrates basic setup for testing with `mock-match-media` using Jest. It shows how to set media properties, evaluate queries, and test event listeners with proper cleanup.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}