Registry / testing / match-media-mock

match-media-mock

JSON →
library0.1.1jsnpmunverified

match-media-mock provides a server-side compatible substitution for the browser's `Window.matchMedia()` API. It allows developers to simulate media queries in non-browser environments, such as Node.js, making it useful for server-side rendering (SSR) of applications that rely on responsive styles or conditional rendering based on media features. The package, currently at version 0.1.1, appears to be unmaintained with its last significant update approximately 8 years ago. Its core functionality is built upon the `css-mediaquery` library for parsing and evaluating media query strings. It was specifically designed for integration with styling libraries like Radium to enable isomorphic React applications to correctly apply styles based on simulated viewport dimensions during server rendering. Due to its age, it lacks modern features and might not be compatible with contemporary module systems (ESM) or testing frameworks without additional shims, and more active alternatives now exist.

testing
npm install match-media-mock
github ↗package ↗
INSTALL
IMPORT
SIG · MATCH-MEDIA-MOCK
M
match-media-mock
testingjavascriptv0.1.1
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

create
✓ const matchMediaMock = require('match-media-mock').create();
✗ import { create } from 'match-media-mock';
This package is CommonJS-only. There is no ESM export. Attempting to use ES module import syntax will result in a runtime error. The `create()` method is the primary entry point to instantiate the mock.
matchMediaMockInstance
✓ const matchMediaMock = require('match-media-mock').create(); matchMediaMock.setConfig({ type: 'screen', width: 1200 });
✗ const matchMediaMock = require('match-media-mock'); // Missing .create() call
The default export of the package is an object that contains the `create` method. You must call `create()` to get an instance of the mock function, rather than importing the package directly.

This example demonstrates how to create and configure a `match-media-mock` instance, evaluate media queries against the configured environment, and manage event listeners for media query changes.

const matchMediaMock = require('match-media-mock').create(); // Configure the mock environment matchMediaMock.setConfig({ type: 'screen', width: 1200 }); // Test media queries console.log("Is (max-width: 991px) matching?", matchMediaMock('(max-width: 991px)').matches); // Expected: false console.log("Is (max-width: 1240px) matching?", matchMediaMock('(max-width: 1240px)').matches); // Expected: true // Interact with a MediaQueryList object const mediaQuery = '(min-height: 800px)'; const mediaQueryList = matchMediaMock(mediaQuery); const listener = (event) => { console.log(`Media query '${mediaQuery}' changed. Matches: ${event.matches}`); }; mediaQueryList.addListener(listener); // Simulate a change in environment and trigger listeners matchMediaMock.setConfig({ type: 'screen', width: 1200, height: 900 }); mediaQueryList.callListeners(); // Manually trigger listeners after config change // Remove the listener mediaQueryList.removeListener(listener);
Debug
Known issues
breakingThis package is effectively abandoned, with its last npm publish 8 years ago. It has not been updated to support modern JavaScript features, module systems (ESM), or Node.js versions. Expect compatibility issues when integrating into contemporary build pipelines or runtimes.
fix
Consider migrating to actively maintained alternatives like `mock-match-media` or `jest-matchmedia-mock` for testing environments, or implement a custom polyfill/mock for production SSR needs.
affects: 0.1.1
gotchaThe package uses CommonJS `require()` syntax exclusively. Attempting to import it using ES module `import` syntax will result in a runtime error, such as `ERR_REQUIRE_ESM` in Node.js environments configured for ESM.
fix
Always use `const matchMediaMock = require('match-media-mock').create();` to import and instantiate the mock. If used in an ESM project, consider using a CommonJS wrapper or a bundler that correctly handles CJS modules.
affects: 0.1.1
gotchaAfter changing the configuration using `setConfig()`, listeners on `MediaQueryList` objects are not automatically triggered. You must explicitly call `mediaQueryList.callListeners()` on each relevant `MediaQueryList` instance to propagate the changes.
fix
Always manually invoke `mediaQueryList.callListeners()` on any `MediaQueryList` objects you wish to update after calling `matchMediaMock.setConfig()`.
affects: 0.1.1
Errors
Common errors & fixes
TypeError: matchMediaMock is not a function
Attempting to call the default import/require directly without invoking the `.create()` method.
fix
Ensure you call `create()` to get the executable function: `const matchMediaMock = require('match-media-mock').create();`
TypeError: window.matchMedia is not a function
This error typically occurs when `matchMedia` is accessed in a non-browser environment without a proper mock or polyfill. While this library is designed to *prevent* this, it can still occur if `window.matchMedia` is accessed *before* this mock is initialized or if this mock isn't correctly integrated into the global `window` object (which it doesn't do by default).
fix
Ensure the mock is initialized and configured *before* any code that attempts to access `window.matchMedia`. If you intend to patch `window`, you might need to manually assign the mock to `window.matchMedia` or use a different library designed for global polyfilling.
Upgrade
Version history
0.1.1latest on npm
Audit
Dependencies
css-mediaqueryrequiredCore dependency for parsing and evaluating CSS media query strings.
radiumoptionalOriginally designed for integration with Radium for server-side rendering of React components based on media queries.
Agent activity
2 hits · last 30 days
node
2
Resources
githubhttps://github.com/azazdeaz/match-media-mock ↗
packagehttps://www.npmjs.com/package/match-media-mock ↗
match-media-mock — npm install match-media-mock · libregistry