react-slick: Testing with Jest causes error
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)
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 8
- Comments: 17 (3 by maintainers)
Add matchMedia to setup.js
window.matchMedia = window.matchMedia || (() => { return { matches: false, addListener: () => {}, removeListener: () => {}, }; });
@romkacrv , I added
matchMedia.js
to__mocks__
folder, which contained inside it:then imported this in setup.js
import matchMedia from '../__mocks__/matchMedia';
Boom! π
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
hello, not working for me, any suggestions ? itβs appear using react-snapshot plugin
Thanks funciono correctamente: window.matchMedia = window.matchMedia || (() => { return { matches: false, addListener: () => {}, removeListener: () => {}, } }) y en jest.conf
const config = { rootDir: ββ¦/β, preset: β@redwoodjs/testing/config/jest/webβ, resolver: path.resolve(__dirname, β./web-custom-resolver.jsβ), transformIgnorePatterns: [ // Update from this π // β[/\\]node_modules[/\\].+\.(js|jsx|mjs|cjs|ts|tsx)$β,
[/\\\\]node_modules[/\\\\](?!${esModules}).+\\.(js|jsx|mjs|cjs|ts|tsx)$
, // To this π β^.+\.module\.(css|sass|scss)$β, ], setupFilesAfterEnv: [βweb/src/setupTest.jsβ], }module.exports = config
@arakno worked for me. But I imported the file in my .test.js file. Thanks for the help.
@arakno That worked for me. Thanks a lot for this