SyntaxError with Jest and React importing SCSS files

Question

I am testing using Jest and my appication is running on Next.js... I am trying to test a page component in my Next application, but I am receiving errors that are shown in the following screenshot; The "Before" image is before I tried implementing a solution found on Stackoverflow, and the "After" is after the solution was implemented. I am still stuck and need some friendly help!

Here is also my current Jest config in my package.json

"jest": {
  "setupFiles": ["./shim.js", "./setupTests.js"],
  "verbose": true,
  "moduleNameMapper": {
    "^.+\\.(css|scss)$": "./cssStub.js"
  }
}

Thanks!

felixmosh · Accepted Answer · 2017-11-12 17:16:10Z

1

I'm using CSS modules and it convenient for me to use "proxy" as if the code requires styles, jest will return a proxy, that will return the required field name instead of the value.

For example:

import * as styles from './styles.scss';

console.log(styles.someClassName);
// the proxy in that case will return a string with `someClassName` value.

All you need to configure is install npm install --save-dev identity-obj-proxy and add

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

to your Jest section in the package.json file.

Edit

Pay attention that according to the docs you should use <rootDir> when you are mapping to a file. "\\.(css|scss)$": "<rootDir>/cssStub.js.js",

edited Nov 12, 2017 at 17:16

answered Nov 12, 2017 at 7:04

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jonmajorc Over a year ago

Interesting. Thanks for your answer! However, the project is not using CSS modules, so I’m not sure if this is the solution I’m looking for.

felixmosh Over a year ago

Edited my answer

jonmajorc · Accepted Answer · 2017-11-12 22:36:26Z

0

My issue was silly enough that I wrongly specified my <rootDir> path. I would suggest reading the solution from this post for further details to how to resolve similar issue... Thanks all for the help!

SyntaxError with Jest and React and importing CSS files

answered Nov 12, 2017 at 22:36

jonmajorc

461 silver badge6 bronze badges

Collectives™ on Stack Overflow

SyntaxError with Jest and React importing SCSS files

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related