mocha-webpack

Precompiles your server-side webpack bundles before running mocha. Inspired by karma-webpack alternatives usage, but this is for Node.js!

Looking for a test runner for the browser? Use karma-webpack instead.

Project status

Work in progress...

Why you might need or want this module

You're building universal javascript applications with webpacks awesome features like including css or images and wanna test your code also in Node?

No problem! Just precompile your tests before running mocha:

$ webpack test.js output.js && mocha output.js

Seems pretty easy. But there are some disadvantages with this approach:

• you can no longer use mochas glob file matching
• you have to precompile each single test or maintain a test entry file and require the desired files

This project is a optimized version of this simple approach with following features:

• precompiles your test files automatically with webpack before executing tests
• no files are written to disk
• define tests to execute like mocha:
  • run a single test file
  • run all tests in the desired directory & if desired in all subdirectories
  • run all tests matching a glob pattern
• rerun only modified & dependent tests in watch mode on file change

Installing mocha-webpack

The recommended approach is to install mocha-webpack locally in your project's directory.

# install mocha, webpack & mocha-webpack as devDependencies
$ npm install --save-dev mocha webpack mocha-webpack

This will install mocha, webpack and mocha-webpack packages into node_modules in your project directory and also save these as devDependencies in your package.json.

Congratulations, you are ready to run mocha-webpack for the first time in your project!

# display version of mocha-webpack
$ node ./node_modules/mocha-webpack/bin/mocha-webpack --version

# display available commands & options of mocha-webpack
$ node ./node_modules/mocha-webpack/bin/mocha-webpack --help

Configuring mocha-webpack

Typing node ./node_modules/mocha-webpack/bin/mocha-webpack .... is just annoying and you might find it useful to configure your run commands as npm scripts inside your package.json.

package.json

...
"scripts": {
    "test": "mocha-webpack --webpack-config webpack.config-test.js \"src/**/*.test.js\"",
  },
...

This allows you to run your test command simply by just typing npm run test.

In addition, the defined command tells mocha-webpack to use the provided webpack config file webpack.config-test.js and to execute all tests matching the pattern src/**/*.test.js.

webpack.config-test.js - example config

var nodeExternals = require('webpack-node-externals');

module.exports = {
  target: 'node', // in order to ignore built-in modules like path, fs, etc.
  externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
};

Maybe you noticed that entry, output.filename and output.path are completely missing in this config. mocha-webpack does this automatically for you and if you would specify it anyway, it will be overridden by mocha-webpack.

If you want to use JavaScript preprocessor such as Babel or CoffeeScript in your webpack config file then give it a name ending with corresponding extension:

webpack.config-test.babel.js - Babel example config

import nodeExternals from 'webpack-node-externals';

export default {
  target: 'node',
  externals: [nodeExternals()],
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: "babel-loader"
      }
    ]
  }
};

webpack.config-test.coffee - CoffeeScript example config

nodeExternals = require 'webpack-node-externals'

module.exports =
  target: 'node'
  externals: [nodeExternals()]
  module:
    loaders: [
      {
        test: /\.coffee$/
        loader: "coffee-loader"
      }
    ]

Shared configuration

mocha-webpack will attempt to load mocha-webpack.opts as a configuration file in your working directory. The lines in this file are combined with any command-line arguments. The command-line arguments take precedence. Imagine you have the following mocha-webpack.opts file:

mocha-webpack.opts

--colors
--webpack-config webpack.config-test.js
src/**/*.test.js

and call mocha-webpack with

$ mocha-webpack --growl

then it's equivalent to

$ mocha-webpack --growl --colors --webpack-config webpack.config-test.js "src/**/*.test.js"

Sourcemaps

Sourcemap support is already applied for you via source-map-support by mocha-webpack. You just need to enable them in your webpack config via the devtool setting.

Note: For a proper debug experience in your IDE (setting breakpoints right into your code) you need to use a devtool which inlines the sourcemaps like inline-cheap-module-source-map.

webpack.config-test.js

var nodeExternals = require('webpack-node-externals');

module.exports = {
  output: {
    // sourcemap support for IntelliJ/Webstorm
    devtoolModuleFilenameTemplate: '[absolute-resource-path]',
    devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
  },
  target: 'node', // in order to ignore built-in modules like path, fs, etc.
  externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
  devtool: "inline-cheap-module-source-map"
};

Sample commands

run a single test

mocha-webpack --webpack-config webpack.config-test.js simple.test.js

run all tests by glob

mocha-webpack --webpack-config webpack.config-test.js "test/**/*.js"

run all tests in directory "test" (add --recursive to include subdirectories)

mocha-webpack --webpack-config webpack.config-test.js test

run all tests in directory "test" matching the file pattern "*.test.js"

mocha-webpack --webpack-config webpack.config-test.js --glob "*.test.js" test

Watch mode? just add --watch

mocha-webpack --webpack-config webpack.config-test.js --watch test

CLI options

see mocha-webpack --help

License

MIT