How to solve Webpack 2 and Karma MemoryFileSystem error?

How to solve Webpack 2 and Karma MemoryFileSystem error?
0

#1

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
    }
  })

#2

Did you ever find a solution to this, I’m faced with the same issue.


#3

Yes, I did. Here is the solution that I posted on stackoverflow

Answer