Jest testing with react: matchMedia not present, legacy browsers require a polyfill

[janjuafarooq]

Trying to shallow render a component using Enzyme and I see this error on my component. I see that this issue was "fixed" previously but I am still seeing it on "react-slick": "^0.14.11". Any suggestions to fix?

matchMedia not present, legacy browsers require a polyfill at new MediaQueryDispatch (node_modules/enquire.js/src/MediaQueryDispatch.js:15:15) at Object. (node_modules/enquire.js/src/index.js:2:18) at Object. (node_modules/react-slick/lib/slider.js:37:38) at Object. (node_modules/react-slick/lib/index.js:3:18)

I am using https://github.com/facebookincubator/create-react-app as my boilerplate

[andrewdc92]

did you already add this? https://github.com/akiran/react-slick#test-setup

[janjuafarooq]

How can I incorporate this fix for the create-react-app starter kit?

https://github.com/facebookincubator/create-react-app

I don't have access to a jest command.

[janjuafarooq]

I had to create a file setupTests.js and place it inside the src/ folder (src/setupTests.js) and put the following code in:

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

After this I ran npm test again and it resolved my issue (had to stop the watch task and restart it).

This resolved my issue. Might want to update instructions for create-react-app

[Slebee]

if you was eject your create-react-app,put that code in /config/polyfills.js

[astroash]

@janjuafarooq did you manage to get this working without ejecting your create-react-app?

[vTrip]

@janjuafarooq could you explain why that fix works please :)

[mustkem]

Press ctrl + e in visual code. And search pollyfills.js file. Open it and put this code.

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

You dont need to eject. Polyfills.js file will rescue in this case.

[igorfelipee]

If you are use react, you can just import an match-media-pollyfil in you App.test.js.

[leotm]

Here are the official docs: Mocking methods which are not implemented in JSDOM

window.matchMedia = jest.fn().mockImplementation(query => {
  return {
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(),
    removeListener: jest.fn(),
  };
});

As a seperate file, then imported then included before the test file:

import './matchMedia.mock'; // Must be imported before the tested file
import {myMethod} from './file-to-test';

describe('myMethod()', () => {
  // Test the method here...
});

[Miltonjacomini]

For me fix was almost the same.

Include the file setupTests.js in src folder.

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

But i have include the insert file on Jest call in package.json. "jest": { //... "setupFilesAfterEnv": [ "<rootDir>/src/setupTests.js" ]

and then run npm test again ... 👍

[zernabhussain]

add this piece of code:

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

in jest.setup.js or setupTests.js (you can check the name from jest.config.js
eg. setupFiles: ["./jest.setup.js"] )

[ioxua]

For anyone still having this issue: if you're using react-scripts@4.0.3, this may help:

Source

// $ npm i -D mq-polyfill
// in src/setupTests.ts

import matchMediaPolyfill from 'mq-polyfill'

matchMediaPolyfill(window)

window.resizeTo = function resizeTo(width, height) {
  Object.assign(this, {
    innerWidth: width,
    innerHeight: height,
    outerWidth: width,
    outerHeight: height
  }).dispatchEvent(new this.Event('resize'))
}

[KentuckySato]

@ioxua Thank you! It works for me! My version of react-script is react-scripts": "^5.0.1 and your solution has solved my problem 🥳

[sbland]

The fixes above didn't help for me so I just mocked react-slick in my setupTests.js file.

jest.mock("react-slick", () => ({
  __esModule: true,
  default: ({ children }) => <div data-testid="slick_mock">{children}</div>,
}));