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

Abhijith Sasikumar · Answer 1 · 2020-04-19T02:54:18.597

54

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

edited Apr 19 '20 at 02:54

answered Jun 02 '17 at 07:27

Abhijith Sasikumar

13,262
4
31
45

1

I've already installed `babel-jest` so this is easier for me and works fine. – Alberto Perez Dec 17 '19 at 11:17
1

I dont use babel. I can use it just for this case? I tried this and don't work. Do I need any other dependency? – Rodrigo Manguinho May 09 '20 at 03:15
1

If you don't have babel, it is better to follow the solution in accepted answer. – Abhijith Sasikumar May 09 '20 at 13:06

score 42 · Accepted Answer · answered Dec 08 '16 at 15:28

42

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

answered Dec 08 '16 at 15:28

Andreas Köberle

106,652
57
273
297

1

I'm not understanding what is this configuration, but is working! Thank you so much, I will study about this – Lai32290 Dec 08 '16 at 16:24
Thanks for this. You just saved me, im searching almost a whole day for a solution for this over the last week! – drecunion Jan 23 '20 at 11:05
1

I tried all these options and no one worked for me. So frustrated – Rodrigo Manguinho May 09 '20 at 03:14
Didn't worked for me because I need the variables exported from the scss file, so I just ended crearing a js file exporting the variables, any idea for this situation? – allamgr Jan 16 '23 at 18:05

Emile Bergeron · Answer 3 · 2018-01-10T17:36:43.720

The following information wasn't available before, so I made a pull request on facebook/jest and it was merged.

I wanted to stub style imported in modules, something like:

// module.js
import Style from '@/path/to/style.scss';
import App from './App';

So I created a style stub file:

// test/unit/stubs/style.js
module.exports = '.style-stub{color:red;}';

After messing around with the following jest.conf.js:

moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1', // '@' alias
    '^.*\\.scss$': '<rootDir>/test/unit/stubs/style.js',
}

I found that the moduleNameMapper ordering is important. The @ alias rule was resolving before my .scss rule, so the style file was loaded as a normal module and would crash the test.

The solution is to put specific rules first.

moduleNameMapper: {
    '^.*\\.scss$': '<rootDir>/test/unit/stubs/style.js',
    '^@/(.*)$': '<rootDir>/src/$1',
}

lifesaver !! I searched for hours and couldn't figure out what's going on... thank you ! — pashata, Nov 02 '22 at 12:21

Carlene · Answer 4 · 2019-02-25T15:51:55.987

I have been searching for a while for a solution to a similar problem and I kept coming across the solution above.

I didn't seem to work for me at first but I realised that Jest was simply ignoring anything I added to "jest" in package.json. My setup includes a jest.config.js file. I found that if I added "moduleNameMapper" there, it worked. So now my jest.test.config.js looks something like this:

module.exports = {
  setupFiles: ["<rootDir>/testSetup.js"],
  moduleNameMapper: {
    "^.+\\.(css|scss)$": "identity-obj-proxy",
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
      "<rootDir>/fileMocks.js"
  }
};

Syntax Error when test component with SASS file imported

4 Answers4

Linked