Menu
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):
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
}
};
// 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;
"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"
}
<!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/bundle
and run your tests with:
npm test // then http://localhost:8081/webpack-dev-server/test
both servers auto-reload && you can run both simultaneously!
module.exports = {
entry: "./index.js",
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
{
"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"
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With