{"id":570,"hash":"d14330a3fa3bed947b2faaaf2e4e63c10fb64385c16a97a78eb1feba8317476a","pattern":"SyntaxError with Jest and React and importing CSS files","full_message":"I am trying to get my first Jest Test to pass with React and Babel.\n\nI am getting the following error:\n\n  SyntaxError: /Users/manueldupont/test/avid-sibelius-publishing-viewer/src/components/TransportButton/TransportButton.less: Unexpected token \n\n    >  7 | @import '../variables.css';\n          | ^\n\nMy package.json config for jest look like this: \n\n\"babel\": {\n    \"presets\": [\n      \"es2015\",\n      \"react\"\n    ],\n    \"plugins\": [\n      \"syntax-class-properties\",\n      \"transform-class-properties\"\n    ]\n  },\n  \"jest\": {\n    \"moduleNameMapper\": {\n      \"^image![a-zA-Z0-9$_-]+$\": \"GlobalImageStub\",\n      \"^[./a-zA-Z0-9$_-]+\\\\.png$\": \"RelativeImageStub\"\n    },\n    \"testPathIgnorePatterns\": [\n      \"/node_modules/\"\n    ],\n    \"collectCoverage\": true,\n    \"verbose\": true,\n    \"modulePathIgnorePatterns\": [\n      \"rpmbuild\"\n    ],\n    \"unmockedModulePathPatterns\": [\n      \"<rootDir>/node_modules/react/\",\n      \"<rootDir>/node_modules/react-dom/\",\n      \"<rootDir>/node_modules/react-addons-test-utils/\",\n      \"<rootDir>/node_modules/fbjs\",\n      \"<rootDir>/node_modules/core-js\"\n    ]\n  },\n\nSo what am I missing?","ecosystem":"npm","package_name":"reactjs","package_version":null,"solution":"moduleNameMapper is the setting that tells Jest how to interpret files with different extension. You need to tell it how to handle Less files.\n\nCreate a file like this in your project (you can use a different name or path if you’d like):\n\nconfig/CSSStub.js\n\nmodule.exports = {};\n\nThis 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:\n\n'^.+\\\\.(css|less)$': '<rootDir>/config/CSSStub.js'\n\nNow 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. \n\nRead more in this guide.","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/39418555/syntaxerror-with-jest-and-react-and-importing-css-files","votes":149,"created_at":"2026-04-19T04:51:22.569028+00:00","updated_at":"2026-04-19T04:51:27.264968+00:00"}