matchMedia not present when testing create-react-app component which contain react-slick?

Question

I tried to create testing file for my existed project which was build by

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

But i got this error when i ran npm test a

FAIL  src/__tests__/movie_single/MovieSingle-test.js
  ● Test suite failed to run

    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 Object.<anonymous>.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/movie_single/MovieDetailsBox.js:4:45)
      at Object.<anonymous> (src/components/movie_single/MovieSingle.js:3:50)
      at Object.<anonymous> (src/__tests__/movie_single/MovieSingle-test.js:3:46)
      at process._tickCallback (internal/process/next_tick.js:103:7)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.642s
Ran all test suites matching "a".

So this is my package.json

{
  "name": "xxx",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "autoprefixer-stylus": "0.10.0",
    "concurrently": "3.0.0",
    "react-scripts": "0.6.1",
    "stylus": "0.54.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "watch": "concurrently --names 'webpack, stylus' --prefix name 'npm run start' 'npm run styles:watch'",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
  }
}

And this is my MovieSingle-test.js

import React from 'react';
import ReactDOM from 'react-dom';
import MoviesSingle from '../../components/movie_single/MovieSingle';

it('renders without crashing', () => {
    const div = document.createElement('div');
    ReactDOM.render(<MoviesSingle />, div);
});

So how can i fix this and at least make the common react component test passed?

Thanks!

Answer 1

This is how I managed to make it work:

// fix: `matchMedia` not present, legacy browsers require a polyfill
global.window.matchMedia = (query) => ({
  matches: false,
  media: query,
  onchange: null,
  addListener: () => {}, // deprecated
  removeListener: () => {}, // deprecated
  addEventListener: () => {},
  removeEventListener: () => {},
  dispatchEvent: () => {},
})

Answer 2

if it is an existing project, you have to install one package called polyfill as dev dependency by using the following command npm i polyfill --save-dev here is the link of that package https://www.npmjs.com/package/polyfill

after installing, if there is setupTests.js file or else setup it in src folder in that paste this

/**
 * fix: `matchMedia` not present, legacy browsers require a polyfill
 */
var polyfill = require("polyfill");

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

it worked for me.

Answer 3

I had just run into it as well, here is what helped me:

Get the test-setup.js from here and place it to the src directory

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

Add the following to the package.json

"jest": {
    "setupFiles": ["<rootDir>\\src\\test-setup.js", "<rootDir>\\config\\polyfills.js"]
  },

See if that helps.

Answer 4

Add a src/setupTests.js to your project (which will be executed before running your tests):

/**
 * fix: `matchMedia` not present, legacy browsers require a polyfill
 */
global.matchMedia = global.matchMedia || function() {
  return {
      matches : false,
      addListener : function() {},
      removeListener: function() {}
  }
}

Answer 5

I followed the following steps to resolve my issue:

• Created a file setupTests.js
• Placed it inside the src folder as src/setupTests.js
• Placed the following code inside setupTests.js:

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

Note: Run the npm test again and it will resolve the issue (stop the watch task and restart it).

Answer 6

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"] )

Answer 7

If you are using GatsbyJS, place the code from @maow inside the loadershim.js file in your root directory.

Answer 8

Take a clue from the error message:

matchMedia not present, legacy browsers require a polyfill

This says that some feature is not available while testing and it needs to be implemented somehow to perform the action.

Find a proper polyfill code for matchMedia such as this polyfill.

Then create a new file in src folder named setupTests.js and paste the polyfill code into the file. React scripts take care that this file will be executed before the tests are run.

Now run tests again. It's fixed. Others have had the same issue.