[Webpack] File Loaders cause mocha to throw Syntax Error

[pl12133]

I went to integrate this test setup into my project which is built on Webpack. As such my .js files sometimes include files loaded with webpack loaders; for example .png or .scss. Mocha throws a SyntaxError on encountering these, so you need a custom compiler.

My custom compiler src/tests/compiler.js:

'use strict'
var babel = require('babel-core/register');
function noop() {
    return null;
}
require.extensions['.scss'] = noop;
require.extensions['.css'] = noop;

And new npm test command:

mocha --compilers js:./src/tests/compiler.js ./src/tests/*.spec.js

[bruderstein]

Thanks for reporting the fix! I've added your text to the wiki, so hopefully people can find it if they need it.
https://github.com/bruderstein/unexpected-react/wiki/Webpack-Loader-issue

[mattdell]

+1

Helped me solve what I thought was a fairly obscure issue.

[siawyoung]

+1, saved my life

[mrberggg]

Thanks for posting this, saved me!

[pl12133]

Update: There is now a package called ignore-styles which seems to accomplish the same goals and also may help with testability.

[crabbits]

+1

[rewmike]

+1

[Qquanwei]

+1