error loading css when running mocha tests with babel-node and babel-istanbul

Question

I am having a problem testing UI components that import .scss with webpack. I am testing the component code directly, not the exported webpack bundle.

In my SUT

I have some code that imports scss:

import '!style!css!sass!postcss-loader!../style.scss'

This code causes an error when I run tests:

Error: Cannot find module '!style!css!sass!postcss-loader!../../stylesheets/parts/Breadcrumbs.scss'
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:286:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)

Cheap workaround

I've been working around this issue with:

try {
    require('!style!css!sass!postcss-loader!../style.scss');
} catch(err) { console.log('Not webpack'); }

But this smells dirty, and I would rather not have this code in my SUT.

Running Tests

I can't figure out how to work in the solutions that I have found for this when using babel-node and babel-istanbul instead of mocha directly. Here is how I am currently running tests:

$ babel-node babel-istanbul cover _mocha -- --require ./test/setup.js --recursive 

All of the answers I have found are for mocha directly, but I am not running tests with:

$ mocha --compilers js:babel-core/register --require ./test/setup.js --recursive

?

How can I work in a compiler or setup file to tell mocha to ignore .scss files. I am going to have this problem next with .svg files too I am sure.

Answer 1

What about github.com/css-modules/css-modules-require-hook or if you wanna just ignore the css npmjs.com/package/ignore-styles

EDIT: If you install ignore-style module and then run:

babel-node babel-istanbul cover _mocha -- --require ./test/setup.js --require node_modules/ignore-styles --recursive 

im sure it will work, bare in mind you might need to change the path node_modules/ignore-styles im assuming you have your node_modules in the root of your project.

Answer 2

So I had a similar problem trying to require with a webpack-loader prefix and failing as not in the context of webpack.

prunk was better than rewire etc as covered me for all files as was able to do path matching and replacement.

var prunk = require('prunk'); prunk.alias(/^(your loader prefix)/, '');

Then I modified requires extension handling to replace what was being imported.

require.extensions['.scss'] = function (module, filename) { module.exports = 'whatever you want'; };

(exactly what style-loader does but style-loader cleans itself up! Also note style loader is misnamed and can handle many extensions))

I added this at the top of my test runner and no unfound modules!

Note I actually went further and used the original loader by itself by reading in the file with fs and passing it to the loader but that may have been over kill and should be using webpack to transpile tests with that sole loader in the first place!