Mocha compiler for es6 + react components with css require statements

compiler.js

'use strict';

var babel = require('babel-core');
var fs = require('fs');

// borrowed from https://github.com/babel/babel-jest/blob/master/index.js
require.extensions['.jsx'] = function (module, filename) {
  var src = fs.readFileSync(filename, 'utf8');
  // Allow the stage to be configured by an environment
  // variable, but use Babel's default stage (2) if
  // no environment variable is specified.
  var stage = process.env.BABEL_JEST_STAGE || 2;

  // Ignore all files within node_modules
  if (filename.indexOf('node_modules') === -1 && babel.canCompile(filename)) {
    var compiled = babel.transform(src, { filename: filename, stage: stage }).code;
    return module._compile(compiled, filename);
  }
  return module;
};

require.extensions['.scss'] = function () {
  return null;
};

require.extensions['.css'] = function () {
  return null;
};

mocha --reporter spec --compilers jsx:client/test/compiler.js ./client/components/**/*test.jsx

Nice, instead of embedding the babel compiler you could do something like this

null-compiler.js

function noop() { return null; }

require.extensions['.css'] = noop;
require.extensions['.md'] = noop;

And run mocha like this:

mocha test/**/*.test.js* -R spec --compilers css:./test/misc/null-compiler,jsx:babel-core/register --recursive

Thanks for this!

Thanks for sharing this!

👍 thanks!!

@xseignard this is a great solution! I changed your answer from css to less to suit my purposes and interestingly, I kept getting Invariant Violation errors until I switched the order of the compilers and listed jsx first. Any idea why that would be?

Brilliant! Thanks

babel.canCompile is not a function on babel-core: ^6.24.1.