I am trying to set up karma to run with webpack in a very simple react app but since updating to webpack 2 all I get is errors when running my tests. Compiling the react app works perfectly tho. Anything in my webpack or karma config that might be causing this?
Here’s my error:
> NODE_ENV=test karma start
START:
(node:1370) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
Error
at MemoryFileSystem.mkdirpSync (/Users/rperez/devProjects/CamperLeaderBoard/node_modules/memory-fs/lib/MemoryFileSystem.js:144:10)
at MemoryFileSystem.(anonymous function) [as mkdirp] (/Users/rperez/devProjects/CamperLeaderBoard/node_modules/memory-fs/lib/MemoryFileSystem.js:279:34)
at Compiler.<anonymous> (/Users/rperez/devProjects/CamperLeaderBoard/node_modules/webpack/lib/Compiler.js:322:27)
at /Users/rperez/devProjects/CamperLeaderBoard/node_modules/webpack/node_modules/async/dist/async.js:3022:16
at eachOfArrayLike (/Users/rperez/devProjects/CamperLeaderBoard/node_modules/webpack/node_modules/async/dist/async.js:941:9)
at eachOf (/Users/rperez/devProjects/CamperLeaderBoard/node_modules/webpack/node_modules/async/dist/async.js:991:5)
at Object.eachLimit (/Users/rperez/devProjects/CamperLeaderBoard/node_modules/webpack/node_modules/async/dist/async.js:3086:3)
at Compiler.emitFiles (/Users/rperez/devProjects/CamperLeaderBoard/node_modules/webpack/lib/Compiler.js:312:20)
at Immediate.<anonymous> (/Users/rperez/devProjects/CamperLeaderBoard/node_modules/memory-fs/lib/MemoryFileSystem.js:288:4)
at runCallback (timers.js:651:20)
at tryOnImmediate (timers.js:624:5)
at processImmediate [as _immediateCallback] (timers.js:596:5)
dependencies:
“dependencies”: {
“axios”: “^0.15.3”,
“express”: “^4.15.2”,
“react”: “^15.4.2”,
“react-dom”: “^15.4.2”,
“react-router”: “^3.0.2”
},
“devDependencies”: {
“babel-core”: “^6.23.1”,
“babel-loader”: “^6.4.0”,
“babel-preset-es2015”: “^6.22.0”,
“babel-preset-react”: “^6.23.0”,
“babel-preset-stage-0”: “^6.22.0”,
“css-loader”: “^0.26.2”,
“expect”: “^1.20.2”,
“foundation-sites”: “^6.3.1”,
“jquery”: “^3.1.1”,
“karma”: “^1.5.0”,
“karma-chrome-launcher”: “^2.0.0”,
“karma-mocha”: “^1.3.0”,
“karma-mocha-reporter”: “^2.2.2”,
“karma-sourcemap-loader”: “^0.3.7”,
“karma-webpack”: “^2.0.2”,
“mocha”: “^3.2.0”,
“node-sass”: “^4.5.0”,
“react-addons-test-utils”: “^15.4.2”,
“sass-loader”: “^6.0.2”,
“script-loader”: “^0.7.0”,
“style-loader”: “^0.13.2”,
“webpack”: “^2.2.1”
}
webpack config:
const webpack = require('webpack');
const path = require('path');
//will be set to 'production on heroku'
//process.env.NODE_ENV = process.env.NODE_ENV || 'development';
module.exports = {
//where to start the app
entry: {
app: path.resolve(__dirname, 'app/app.jsx'),
},
output: {
path: path.resolve(__dirname, './public'),
filename: '[name].bundle.js'
},
//setting up the babel loader to handle jsx files(es2015)
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_componets)/,
use: [{
loader: 'babel-loader',
options: {presets:['react', 'es2015', 'stage-0']}
}],
},
],
},//end of modules
resolve: {
//Tell webpack what directories should be searched when resolving modules.
modules: [
path.join(__dirname, 'app/components'),
path.join(__dirname, 'app/api'),
'node_modules',
],
//Automatically resolve certain extensions.
extensions: ['.js', '.jsx', '.json'],
}, //end of resolve
//This option controls if and how Source Maps are generated.
devtool:'cheap-module-eval-source-map'
};//end of module.exports
karma config:
var webpackConfig = require('./webpack.config.js');
module.exports = function (config) {
config.set({
browsers: ['Chrome'],
singleRun: true,
frameworks: ['mocha'],
files: [
'./app/tests/**/*.test.jsx'
],
preprocessors: {
'./app/tests/**/*.test.jsx': ['webpack', 'sourcemap']
},
reporters: ['mocha'],
client: {
mocha: {
timeout: '5000'
}
},
webpack: webpackConfig,
webpackServer: {
noInfo: true
}
})