score:0
i added modulenamemapper at the bottom of my package.json where i configured my jest just like this:
"jest": {
"verbose": true,
"modulenamemapper": {
"\\.(scss|less)$": "<rootdir>/config/cssstub.js"
}
}
score:1
update: aug 2021 if you are using next js with typescript. simply follow the examples repo.
else you will be wasting days configuring the environment.
https://github.com/vercel/next.js/blob/canary/examples/with-typescript-eslint-jest/package.json
score:7
solution of @import unexpected token=:)
install package:
npm i --save-dev identity-obj-proxy
add in jest.config.js
module.exports = {
"modulenamemapper": {
"\\.(css|less|scss)$": "identity-obj-proxy"
}
}
score:7
if you're using ts-jest, none of the solutions above will work! you'll need to mock transform.
jest.config.js
module.exports = {
preset: 'ts-jest',
testenvironment: 'jsdom',
roots: [
"<rootdir>/src"
],
transform: {
".(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootdir>/jest-config/file-mock.js",
'.(css|less)$': '<rootdir>/jest-config/style-mock.js'
},
};
file-mock.js
module.exports = {
process() {
return `module.exports = 'test-file-stub'`;
},
};
style-mock.js
module.exports = {
process() {
return 'module.exports = {};';
}
};
i found this working example if you want more details.
score:15
similar situation, installing identity-object-proxy and adding it to my jest config for css is what worked for me.
//jest.config.js
module.exports = {
modulenamemapper: {
"\\.(css|sass)$": "identity-obj-proxy",
},
};
the specific error i was seeing:
jest encountered an unexpected token
/users/foo/projects/crepl/components/atoms/button/styles.css:1
({"object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.button { }
^
syntaxerror: unexpected token .
1 | import react from 'react';
> 2 | import styles from './styles.css';
score:27
update who use create-react-app from feb 2018. you cannot override the modulenamemapper in package.json but in jest.config.js it works, unfortunately i havent found any docs about this why it does. so my jest.config.js look like this:
module.exports = {
...,
"modulenamemapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootdir>/__mocks__/filemock.js",
"\\.(scss|sass|css)$": "identity-obj-proxy"
}
}
and it skips scss files and @import quite well.
backing my answer i followed jest webpack
score:61
i solved this by using the modulenamemapper
key in the jest configurations in the package.json file
{
"jest":{
"modulenamemapper":{
"\\.(css|less|sass|scss)$": "<rootdir>/__mocks__/stylemock.js",
"\\.(gif|ttf|eot|svg)$": "<rootdir>/__mocks__/filemock.js"
}
}
}
after this you will need to create the two files as described below
__mocks__/stylemock.js
module.exports = {};
__mocks__/filemock.js
module.exports = 'test-file-stub';
if you are using css modules then it's better to mock a proxy to enable classname lookups. hence your configurations will change to:
{
"jest":{
"modulenamemapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootdir>/__mocks__/filemock.js",
"\\.(css|less|scss|sass)$": "identity-obj-proxy"
},
}
}
but you will need to install identity-obj-proxy
package as a dev dependancy i.e.
yarn add identity-obj-proxy -d
for more information. you can refer to the jest docs
score:104
modulenamemapper
is the setting that tells jest how to interpret files with different extension. you need to tell it how to handle less files.
create a file like this in your project (you can use a different name or path if you’d like):
config/cssstub.js
module.exports = {};
this stub is the module we will tell jest to use instead of css or less files. then change modulenamemapper
setting and add this line to its object to use it:
'^.+\\.(css|less)$': '<rootdir>/config/cssstub.js'
now jest will treat any css or less file as a module exporting an empty object. you can do something else too—for example, if you use css modules, you can use a proxy so every import returns the imported property name.
read more in this guide.
Source: stackoverflow.com
Related Query
- SyntaxError with Jest and React and importing CSS files
- SyntaxError with Jest and React importing SCSS files
- Test react components with jest and enzyme and css modules
- How to Create global styles with Styled components in react and next js and is it better to use combination of css files and styled component?
- How to test a className with the Jest and React testing library
- How to import CSS modules with Typescript, React and Webpack
- How to mock React component methods with jest and enzyme
- Multiple classNames with CSS Modules and React
- Importing CSS files in Isomorphic React Components
- Remove unused css with React and Webpack
- Line two divs side by side with CSS and React
- Spying on React functional component method with jest and enzyme; Cannot spyOn on a primitive value
- How to use vw and vh css with React Native
- How to test form submission in React with Jest and Enzyme? Cannot read property 'preventDefault' of undefined
- Test a form with Jest and React JS TestUtils
- How to test snapshots with Jest and new React lazy 16.6 API
- using google fonts in nextjs with sass, css and semantic ui react
- How to read console.log from a mounted component with Enzyme and Jest in Create React App
- Testing debounced function in React component with Jest and Enzyme
- How to mock a React component lifecycle method with Jest and Enzyme?
- Jest Manual Mocks with React and Typescript: mock an ES6 class dependency
- CSS Code Splitting with Webpack 2 and React Router
- Test text input with react and jest
- how can I test if useState hook has been called with jest and react testing library?
- Test with Mocha and Enzyme a React component that uses React CSS Modules
- webpack not reflecting changes in js files with react and django
- Testing react context with jest and react-testing-library
- How to use Jest with React and Webpack
- Unit test method that calls clearInterval with Jest and Enzyme on React
- How to test redux state update with react testing library and jest
More Query from same tag
- Use UseReduce and useContext with redux?
- styles applied to Horizontal Line via css file is not working
- Unable to edit form when loaded with values using Semantic UI React
- How to persist the value of a dropdown menu in a React/Redux app
- why next/link rendering twice? how to solve it?
- React Context Provider - useContext undefined error in hook
- ADD_SONG not added to PlayList
- REACT Jest - Test suite failed to run
- How to avoid unnecessary API calls with useEffect?
- ReactJS content not filing up the whole page and is only taking up 3/4 of the available height
- How to check Material UI checkbox Manually?
- Testing async action called by another async action
- Looping an array to list items
- Best place/way to declare static data in React
- How to organise file structure of backend and frontend in MERN
- Webpack Config multiple entry points error with filter
- How to style a single element inside Material-ui autocomplete
- how to add headers to the api response using reactjs
- I am having trouble retrieving my react project in the browser
- React TypeScript 16.8 How to make useEffect() async
- onCenterChange callback returns undefined @react-google-maps/api
- Increasing count on click for custom Object
- How to access values from redux store outside of the form?
- Why my "new Question" button is not changing the question when i click the button?
- Best practice interface for custom hooks with function arguments
- TypeError: Cannot read property 'map' of undefined using ReactJs
- Changing star amount in MUI Rating
- Returning const with fragment to
- How to create new array with conditionally adding an additional property comparing two arrays
- State is not updated in StrictMode