Handle WebPack CSS imports when testing with Mocha

Question

With WebPack you can import styles in your code like this: import './PageSpinner.styl'; But when you try to test this code with Mocha, your tests will be crashed with SyntaxError because engine tries to handle styles like JS code.

How can I test code like this with Mocha?

Answer 1

I had the same problem lately and the solution was through Mocha compilers.

create a file, let's call 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 with the ignore-styles package.

Install the package and then require when running mocha.

e.g.

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