React-slick: Enquire js errors out becuase matchMedia not present

[trodrigu]

My error is matchMedia not present, legacy browsers require a polyfill
I am running my tests with jest.

[trodrigu]

It's specifically happening in the react-responsive-mixin

[vramana]

What is the browser that you are targeting?

[trodrigu]

Jest ships with jsdom.

[trodrigu]

[trodrigu]

Just a snippet from the jest jQuery tutorial at https://facebook.github.io/jest/docs/tutorial-jquery.html

[vramana]

I am sorry. But what exactly is the issue here? You are not able to test the slick component in jest, is that correct?

[trodrigu]

Correct. These are the settings for the component.

  var settings = {
  autoplay: true,
  dots: false,
  infinite: true,
  speed: 500,
  rtl: false,
  pauseOnHover: true,/*not working*/
  responsive: [
    {
      breakpoint: 479,
      settings: {
        slidesToScroll: 1,
        slidesToShow: 1
      }
    },
    {
      breakpoint: 767,
      settings: {
        slidesToScroll: 1,
        slidesToShow: 1
      }
    },
    {
      breakpoint: 991,
      settings: {
        slidesToScroll: 1,
        slidesToShow: 6
      }
    },
    {
      breakpoint: 1200,
      settings: {
        slidesToScroll: 1,
        slidesToShow: 6
      }
    },
    {
      breakpoint: 2840,
      settings: {
        slidesToScroll: 1,
        slidesToShow: 6
      }
    }
  ]

[trodrigu]

The issue is that enquire js not seeing matchMedia, which is under the react-responsive-mixin.

[trodrigu]

Full error is
Error: /Users/thomas/Sites/design-2-1/server/isomorphic/components/TrendingSlider.js: /Users/thomas/Sites/design-2-1/node_modules/react-slick/lib/index.js: /Users/thomas/Sites/design-2-1/node_modules/react-slick/lib/slider.js: /Users/thomas/Sites/design-2-1/node_modules/react-slick/node_modules/react-responsive-mixin/index.js: /Users/thomas/Sites/design-2-1/node_modules/react-slick/node_modules/react-responsive-mixin/node_modules/enquire.js/dist/enquire.js: matchMedia not present, legacy browsers require a polyfill

[trodrigu]

I found that stubbing it out was the solution because the browser is headless.
This is where I found the answer. Thanks.

[fadeojo]

@trodrigu please where does the stub go? Testcase or component?

[akiran]

@fadeojo you should add below jest config in package.json and add test-setup.js file
https://github.com/akiran/react-slick/blob/master/package.json#L74-L76

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

[fadeojo]

@akiran Thanks, I got it working.

[yyynnn]

@akiran Running into the same problem while building to static bundle using "react-static-webpack-plugin". What can be done? While in dev everything works fine.

[renoiser]

I have the same problem with react-static-webpack-plugin, @yyynnn did you find a solution?

[browne0]

I'm having the same problem @yyynnn how did you resolve this? WOuld love to hear from you @akiran on what to do when building :)

Thanks!