WebPack CSS import processing when testing with Mocha

Question

Using WebPack, you can import styles into your code as follows: import './PageSpinner.styl'; But when you try to test this code using Mocha, your tests will be broken using SyntaxError, because the engine is trying to handle styles such as JS code.

How can I test such code with Mocha?

Answer 1

Recently, I had the same problem and the solution was implemented using Mocha compilers.

create a file, name it "css-null-compiler.js" and it has:

 function noop() { return null; } require.extensions['.styl'] = noop; // you can add whatever you wanna handle require.extensions['.scss'] = noop; require.extensions['.png'] = noop; // ..etc 

when you run mocha from the command line, pass this file as a compiler

 mocha /your/test.spec.js --compilers css:css-null-compiler.js 

Answer 2

This can be done using ignore-styles .

Install the package and then run mocha.

eg.

 mocha --require babel-register --require ignore-styles