2

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!

enter image description here

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!

jonmajorc
  • 46
  • 6

2 Answers2

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

felixmosh
  • 32,615
  • 9
  • 69
  • 88
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

jonmajorc
  • 46
  • 6