Syntax Error when test component with SASS file imported

Question

I'm trying test my React component with Jest + Enzyme, but when my component has SASS file (scss), is occurring SyntaxError.

This is my SASS file content:

.user-box {   width: 50px;   height: 50px; } 

And I just import that in my component:

import React from 'react';  import './userBox.scss';  class MyComponent extends React.Component {     render() {         const style = {             borderRadius: '99px'         };         return (             <div>Hello World</div>         );     } }  export default MyComponent; 

Following error message of my test:

If I comment the import './userBox.scss';, test will be okey.

How to can I test React component with Jest + ‵Enzyme` when has style imported

Answer 1

If you have Babel in your stack, you can fix this in the right way using babel-jest

Just do npm i --save-dev babel-jest and in your jest settings file add:

"moduleNameMapper": {   "^.+\\.(css|less|scss)$": "babel-jest" } 

Answer 2

You have do define a mock for this kind of file by define moduleNameMapper in your jest settings.

We are using identity-obj-proxy. So install it with

npm install identity-obj-proxy --save-dev  

and add it your jest setting:

"moduleNameMapper": {     "^.+\\.(css|less|scss)$": "identity-obj-proxy"   }