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!
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() {}
}
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With