Jest test fails : TypeError: window.matchMedia is not a function

Jest test fails: TypeError: window.matchMedia is not a function

If you are encountering the error “TypeError: window.matchMedia is not a function” while running Jest tests, don’t worry, you’re not alone. This error typically occurs when you are trying to use the window.matchMedia method in your JavaScript code, but it is not available in the testing environment provided by Jest.

Fortunately, there are a few solutions to this problem. Let’s explore them one by one.

Solution 1: Mocking the window.matchMedia method

One way to resolve this issue is by mocking the window.matchMedia method in your Jest tests. By doing so, you can provide a custom implementation of the method that works in the testing environment.

Here’s an example of how you can mock the window.matchMedia method:

// In your test file
window.matchMedia = jest.fn().mockImplementation(query => ({
  matches: false,
  media: query,
  onchange: null,
  addListener: jest.fn(),
  removeListener: jest.fn(),
}));

In the above code snippet, we are mocking the window.matchMedia method and providing a custom implementation that returns an object with the necessary properties and methods.

Solution 2: Using a polyfill

If you prefer not to mock the window.matchMedia method, another solution is to use a polyfill that provides the functionality of window.matchMedia in the testing environment.

One popular polyfill for window.matchMedia is matchMedia.js. You can include this polyfill in your Jest test setup file to ensure that the window.matchMedia method is available during testing.

Here’s an example of how you can include the matchMedia.js polyfill:

// In your Jest test setup file (e.g., setupTests.js)
import 'matchmedia-polyfill';
import 'matchmedia-polyfill/matchMedia.addListener';

By including the matchMedia.js polyfill, you can use the window.matchMedia method in your Jest tests without encountering the “TypeError: window.matchMedia is not a function” error.

Now that you have learned about the two solutions to resolve the “TypeError: window.matchMedia is not a function” error in Jest tests, you can choose the one that best suits your needs and continue writing your tests without any issues.

Happy testing!

Final HTML:

<

pre>

// In your test file
window.matchMedia = jest.fn().mockImplementation(query => ({
  matches: false,
  media: query,
  onchange: null,
  addListener: jest.fn(),
  removeListener: jest.fn(),
}));