34

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:

Jest test error message

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

4 Answers 4

63

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"
}
3
  • 1
    I've already installed babel-jest so this is easier for me and works fine. Commented Dec 17, 2019 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? Commented May 9, 2020 at 3:15
  • 1
    If you don't have babel, it is better to follow the solution in accepted answer. Commented May 9, 2020 at 13:06
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"
  }
4
  • 1
    I'm not understanding what is this configuration, but is working! Thank you so much, I will study about this
    – Lai32290
    Commented Dec 8, 2016 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
    Commented Jan 23, 2020 at 11:05
  • 1
    I tried all these options and no one worked for me. So frustrated Commented May 9, 2020 at 3: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
    Commented Jan 16, 2023 at 18:05
7

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',
}
1
  • 1
    lifesaver !! I searched for hours and couldn't figure out what's going on... thank you !
    – pashata
    Commented Nov 2, 2022 at 12:21
5

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.