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

Question

The Jest documentation now has an "official" workaround:

Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: jest.fn().mockImplementation(query => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(), // Deprecated
    removeListener: jest.fn(), // Deprecated
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
  })),
});

Mocking methods which are not implemented in JSDOM

I've been using this technique to solve a bunch of mocking problems.

describe("Test", () => {
  beforeAll(() => {
    Object.defineProperty(window, "matchMedia", {
      writable: true,
      value: jest.fn().mockImplementation(query => ({
        matches: false,
        media: query,
        onchange: null,
        addListener: jest.fn(), // Deprecated
        removeListener: jest.fn(), // Deprecated
        addEventListener: jest.fn(),
        removeEventListener: jest.fn(),
        dispatchEvent: jest.fn(),
      }))
    });
  });
});

Or, if you want to mock it all the time, you could put inside your mocks file called from your package.json: "setupFilesAfterEnv": "<rootDir>/src/tests/mocks.js",.

Reference: setupTestFrameworkScriptFile

I put a matchMedia stub in my Jest test file (above the tests), which allows the tests to pass:

window.matchMedia = window.matchMedia || function() {
    return {
        matches: false,
        addListener: function() {},
        removeListener: function() {}
    };
};

Jest uses jsdom to create a browser environment. JSDom doesn't however support window.matchMedia so you will have to create it yourself.

Jest's manual mocks work with module boundaries, i.e. require / import statements so they wouldn't be appropriate to mock window.matchMedia as is because it's a global.

You therefore have two options:

1. Define your own local matchMedia module which exports window.matchMedia. -- This would allow you to then define a manual mock to use in your test.

2. Define a setup file which adds a mock for matchMedia to the global window.

With either of these options you could use a matchMedia polyfill as a mock which would at least allow your tests to run or if you needed to simulate different states you might want to write your own with private methods allowing you to configure it's behaviour similar to the Jest fs manual mock