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"
}