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 bundlevar 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.
I liked JimSkerritt's answer, but couldn't get it to work on my computer for some reason. With the two config files below you can run the app via:
npm start // then http://localhost:8080/bundleand run your tests with:
npm test // then http://localhost:8081/webpack-dev-server/testboth servers auto-reload && you can run both simultaneously!
Config Files
webpack.config.js
module.exports = { entry: "./index.js", output: { path: __dirname + "/build", filename: "bundle.js" }, module: { loaders: [ { test: /\.css$/, loader: "style!css" } ] }};package.json
{ "name": "2dpointfinder", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack-dev-server --inline", "test": "webpack-dev-server 'mocha!./tests/test.js' --output-filename test.js --port 8081" }, "author": "", "license": "ISC", "dependencies": { "css-loader": "^0.19.0", "style-loader": "^0.12.4" }, "devDependencies": { "mocha": "^2.3.3", "mocha-loader": "^0.7.1", "should": "^7.1.0" }}