React-slick: Testing with Jest causes error

[baransu]

I'm using creact-react-app which uses jest for testing. During default test which is provided by create-react-app it throws error about matchMedia. Because jest is getting more popular for react testing it would be convenient to prevent this by default.

matchMedia not present, legacy browsers require a polyfill

  at Object.MediaQueryDispatch (node_modules/enquire.js/dist/enquire.js:226:19)
  at node_modules/enquire.js/dist/enquire.js:291:9
  at i (node_modules/enquire.js/dist/enquire.js:11:20)
  at Object.<anonymous> (node_modules/enquire.js/dist/enquire.js:21:2)
  at Object.<anonymous> (node_modules/react-responsive-mixin/index.js:2:28)
  at Object.<anonymous> (node_modules/react-slick/lib/slider.js:19:29)
  at Object.<anonymous> (node_modules/react-slick/lib/index.js:3:18)
  at Object.<anonymous> (src/components/Testimonials.jsx:3:45)
  at Object.<anonymous> (src/pages/Index.jsx:7:47)
  at Object.<anonymous> (src/App.jsx:8:40)
  at Object.<anonymous> (src/App.test.jsx:3:38)
  at process._tickCallback (internal/process/next_tick.js:103:7)

[saygon91]

Add matchMedia to setup.js

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

[akiran]

I created test-setup files
https://github.com/akiran/react-slick/blob/master/test-setup.js

and added jest config in package.json
https://github.com/akiran/react-slick/blob/master/package.json#L74-#L76

[ettaibi]

with mocha tests where should add matchMedia ?

[ShadyXV]

I still have this issue. Where do i put the text-setup.js file with -
window.matchMedia = window.matchMedia || (() => { return { matches: false, addListener: () => {}, removeListener: () => {}, }; });
in my project?

[ShadyXV]

Test passed after i made a file named setupTests.js inside src and pasted the code above.
Looks like things have changed after [email protected].
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#initializing-test-environment

[romkacrv]

hello, not working for me, any suggestions ? it's appear using react-snapshot plugin

[laveesingh]

@romkacrv did you try ShadyXV's solution?

[romkacrv]

I've tried setupTests with code for window.matchMedia, did not help.

[laveesingh]

Sorry, I meant did you try ShadyXV's solution: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#initializing-test-environment

[romkacrv]

yes, tried src/setupTests.js with window.matchMedia = window.matchMedia || (() => { return { matches: false, addListener: () => {}, removeListener: () => {}, }; }); inside it, won't help, damn.

[arakno]

@romkacrv , I added matchMedia.js to __mocks__ folder, which contained inside it:

// __mocks__/matchMedia.js
'use strict';

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

Object.defineProperty(window, 'getComputedStyle', {
    value: () => ({
        getPropertyValue: () => {}
    })
});

module.exports = window;

then imported this in __setup.js__
import matchMedia from '../__mocks__/matchMedia';

Boom! :)

[Guyda]

@arakno That worked for me. Thanks a lot for this

[webuijorgeGL]

@arakno worked for me. But I imported the file in my .test.js file. Thanks for the help.

[rubenesda]

@akiran I had this error "ReferenceError: window is not defined" and I copy the code lines in my setupTest.js. And I tried the same comments above and doesn't work. What Do I bad?

[kvieira90]

Yeah once adding the defineProperty solution I start recieving "Cannot read property 'history' of undefined" and "Cannot read property 'location' of undefined" when running Jest tests and using hooks such as 'useHistory' or 'useLocation'. Any help here would be appreciated so I can finish writing these tests