Handle Webpack CSS Imports When Testing with Mocha and Babel

Handle WebPack CSS imports when testing with Mocha and Babel

I came across the same problem and just got it working, so in my mocha.opts file I added the following require calls:

--require test/babelhook
--require test/css-null-compiler

In babelhook.js I have one require statement to load babel:

// This file is required in mocha.opts
// The only purpose of this file is to ensure
// the babel transpiler is activated prior to any
// test code, and using the same babel options

require("babel-register")();

Then from the link you provided I setup css-null-compiler.js as follows:

// Prevent Mocha from compiling class
function noop() {
  return null;
}

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

Hope that helps.

Handle WebPack CSS imports when testing with Mocha

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

Mocha testing failed due to css in webpack

There is a babel/register style hook to ignore style imports:

https://www.npmjs.com/package/ignore-styles

Install it:

npm install --save-dev ignore-styles

Run tests without styles:

mocha --require ignore-styles

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

What about github.com/css-modules/css-modules-require-hook or if you wanna just ignore the css npmjs.com/package/ignore-styles

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.

Mocha test failing using babel and webpack

You can use the --compilers option which allows you to customize the nodejs require system in order to let it understand png files. So :

mocha --compilers png:./mochacfg.js

Or create a file 'test/mocha.opts' containing (better for your needs):

--compilers png:./mochacfg.js

With ./mochacfg.js:

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

This ignores png files (should be ok if you do nothing special with them).

If you want to do something with the image data:

var fs = require('fs');
require.extensions['.png'] = function(module, filepath) {
  var src = fs.readFileSync(filepath).toString ('base64');
  return module._compile('module.exports = "data:image/png;base64,' + src + '";');

}

Mocha test of React component which uses System.js to handle css import

I got it working in nodejs itself. I just had to stub out imports to css files. Rest of stuff babel handles. This is my require file which mocha uses.

process.env.BABEL_DISABLE_CACHE = 1;

require('babel-core/register')({
  'optional': [
    'es7.classProperties'
  ],
  'resolveModuleSource': function (source) {
    if (source.indexOf('dist/css') !== -1) {
      return '../../../test/css-dummy.js';
    }
    return source;
  },
  'blacklist': []
});

Cannot import SCSS file while running mocha test on isomorphic app

I've found the solution.
https://github.com/darul75/web-react/blob/master/app/components/TodoSection/TodoItem.js#L13

When I'm running test on the server:

APP_ENV=SERVER ./node_modules/.bin/mocha tests.js ./test/**/*.spec.js

On the client I have to add a plugin to the webpack config:

plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      'APP_ENV': JSON.stringify('BROWSER'),
     }
  })
]

Mocha tests don't run with Webpack and mocha-loader

Mocha loader won't run tests while building, it's used to create a bundle specifically containing your tests which you can then run from your browser.

I would recommend creating a separate webpack config file for your tests, which you can then host on a webpack-dev-server that uses a different port from your application. Here's an example that's more-or-less the pattern that I use for my own projects (as of writing this answer):

webpack.tests.config.js

module.exports = {
    entry: 'mocha!./tests/index.js',
    output: {
        filename: 'test.build.js',
        path: 'tests/',
        publicPath: 'http://' + hostname + ':' + port + '/tests'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: ['babel-loader']
            },
            {
                test: /(\.css|\.less)$/,
                loader: 'null-loader',
                exclude: [
                    /build/
                ]
            },
            {
                test: /(\.jpg|\.jpeg|\.png|\.gif)$/,
                loader: 'null-loader'
            }
        ]
    },
    devServer: {
        host: hostname,
        port: port
    }
};

tests/index.js

// This will search for files ending in .test.js and require them
// so that they are added to the webpack bundle
var context = require.context('.', true, /.+\.test\.js?$/);
context.keys().forEach(context);
module.exports = context;

package.json

"scripts": {
    "test": "find ./ -name '*.test.js' | xargs mocha -R min -r babel/register",
    "devtest": "webpack-dev-server --config webpack.tests.config.js",
    "dev": "webpack-dev-server --config webpack.config.js"
}

test.html

<!DOCTYPE html>
<html>
    <head>
        <title>Mocha</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./node_modules/mocha/mocha.css" />
        <script src="/tests/test.build.js"></script>
    </head>
    <body>
    </body>
</html>

Then run npm run devtest, open http://localhost:<port you picked>/webpack-dev-server/test.html, and mocha should run your tests.

If you don't require CSS/LESS or images through your modules, you can remove those loaders from webpack.tests.config.js.

With hot loading enabled this is a really great setup because I can have both my application and my tests running in different browser tabs, then update my code and see my changes and my tests re-running immediately.

You can also run npm run test to execute the same tests through the command line.

Hope this helps.

---

Related Topics