Tabbyofjudah Tabbyofjudah - 1 year ago 179
Sass (Sass) Question

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

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 {
} 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 Source

What about or if you wanna just ignore the css

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.