ant-design: 4.0.0-rc.1 TypeError: window.matchMedia is not a function in Jest

This also works for Error: Uncaught [TypeError: Cannot read property 'addListener' of undefined]:

Object.defineProperty(window, 'matchMedia', {
    value: () => {
      return {
        matches: false,
        addListener: () => {},
        removeListener: () => {}
      };
    }
})

This worked for me:

setupTests.ts

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

More here #27658

You can fix this by mocking the window.matchMedia method in the setupTests.js file or before your tests. Here’s the mock I use:

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(),
  })),
});

source

TypeError: Cannot read property 'addListener' of undefined Is what I got after Add the mocked matchMedia object

Hi,

I solved this by doing:

Adding in jest.config.js file:

...
setupFilesAfterEnv: ['./jest.setup.js']

Creating a file jest.setup.js in root folder with:

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()
  }))
})

ps: setupFilesAfterEnv is the “new” deprecated setupTestFrameworkScriptFile.

You can fix this by mocking the window.matchMedia method in the setupTests.js file or before your tests. Here’s the mock I use:

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(),
  })),
});

source

Receiving the following error after using this mock object:

TypeError: mql.addListener is not a function

You can fix this by mocking the window.matchMedia method in the setupTests.js file or before your tests. Here’s the mock I use:

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(),
  })),
});

source

Receiving the following error after using this mock object:

TypeError: mql.addListener is not a function

I have the same probelm. have you solved it?

@tambaqui thank you it fixed my problem, it should be part of antd docs 💯

You can fix this by mocking the window.matchMedia method in the setupTests.js file or before your tests. Here’s the mock I use:

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(),
  })),
});

source

Receiving the following error after using this mock object:

TypeError: mql.addListener is not a function

I have the same probelm. have you solved it?

I fixed it by removing jest.resetAllMocks() in my afterEach()

@tambaqui Thank you so much. You saved me.

react: 17.0.1 antd: 4.8.0 typescript: 4.0.5

I’m using the same approach as mentioned above, but I’m getiing Error: Uncaught [TypeError: Cannot read property 'addListener' of undefined].

totally, quite similar solutions didn’t work out for the project I’m busy with and this one helped

@tambaqui thank you it fixed my problem, it should be part of antd docs 100