Mocha scss issue

[nikos-manolas]

Hey,

I am using scss modules
Trying to configure mocha tests..
Using the example from https://github.com/vercel/next.js/tree/canary/examples/with-mocha.
Tests are complaining: @import 'all'; ^ SyntaxError: Invalid or unexpected token
I assume I need to compile the scss somehow?

Any help would be much appreciated.
Thank you.

[jamesmosier]

This Stack Overflow answer worked for me:

npm install --save-dev ignore-styles

then run your tests in your package.json via:

"test": "cross-env NODE_ENV=test mocha --require ignore-styles",

[nikos-manolas]

Thank you for the answer.
That works if I don't want to import any styles.
What if I want in my unit tests to shallow.find based on the classNames of the components? This wouldn't work as they will be undefined. Is there a way to use the imports?

[jamesmosier]

For that you'd want to add this to mocha.setup.js (found via this gist)

import hook from 'css-modules-require-hook'
import sass from 'node-sass'

hook({
  extensions: [ '.scss' ],
  preprocessCss: data => sass.renderSync({ data }).css
})

and also add @babel/register and css-modules-require-hook to your package.json

then you'd get something like this:

<div>
  <p className="_index_module__foo">
    Hello World!
  </p>
</div>

[nikos-manolas]

Will try it out. Thank you.