MatchMedia not present when testing the create-react-app component that contains responsive slick?

Question

I tried to create a test file for my existing project that was created

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 do a general component component test?

Thanks!

Answer 1

I just stumbled upon it, here is what helped me:

• get test-setup.js from here and put it in the src directory

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

2. Add the following to package.json :

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

See if that helps.

Answer 2

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

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

Answer 3

Take the key from the error message:

matchMedia is missing, outdated browsers require polyfill

This suggests that some function is not available during testing, and it must be somehow implemented to complete the action.

Find the correct polyfill code for matchMedia , for example this polyfill .

Then create a new file in the src folder named setupTests.js and paste the polyfill code into the file. Response scripts will ensure that this file is executed before the tests run.

Now run the tests again. This is fixed. Others had the same problem.