With Chai Test: Adding react-slick throws error - matchMedia not present

Question

After adding the react-slick slider to my webpack project, my chai test began to fail with

C:\project\proj\js\node_modules\enquire.js\dist\enquire.js:226
            throw new Error('matchMedia not present, legacy browsers require a polyfill');
            ^

Error: matchMedia not present, legacy browsers require a polyfill
    at Object.MediaQueryDispatch (C:\project\proj\js\node_modules\enquire.js\dist\enquire.js:226:19)
    at C:\project\proj\js\node_modules\enquire.js\dist\enquire.js:291:9
    at i (C:\project\proj\js\node_modules\enquire.js\dist\enquire.js:11:20)
    at Object.<anonymous> (C:\project\proj\js\node_modules\enquire.js\dist\enquire.js:21:2)

The only fix for this problem that the author of the slider component recommended here is for jest. I have tried that in my environment but it did not work.

I ended up throwing this react-slick slider into the garbage and creating my own slider instead. The react-slick slider is useless if only because unlike most npm packages out there, it managed to entangled itself with some arcane dependency. Completely useless unless you intend to test with jest. — Stephen Isienyi, Feb 28 '17 at 01:31

score 0 · Answer 1 · answered Jan 26 '18 at 14:12

The solution should be based on your test runner in general you have to mock window.matchMedia

window.matchMedia = () => ({
  matches : false,
  addListener : () =>{},
  removeListener: () =>{},
});

or

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

If you will have something like window is not defined you might try to attach it to global object which is used by test runners.

Hope this will help, good luck

score 0 · Answer 2 · answered Jul 20 '19 at 18:48

Im using mocha.

I added it in dom.js

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

so i can call it using this command.

mocha --compilers js:babel-register --require dom.js --recursive

With Chai Test: Adding react-slick throws error - matchMedia not present

2 Answers2