Path is a file error loading tests with Karma and Webpack

Question

I am trying to setup the Karma test runner on a webpack project I am working on. I have a few test files that I tried to include but Karma keeps on giving me Error: Path is a file '/_karma_webpack_/app/w/tests/components'. Why does MemoryFileSystem fail with this message? All help is appreciated.

My karma.conf.js:

    //Require webpack config rather than duplicating it
var webpackConfig = require('./webpack.config');
webpackConfig.devtool = 'inline-source-map';

module.exports = function(config) {
  config.set({
    basePath:'',
    browsers: ['Chrome_without_sandbox'], // Note: PhantomJS has too outdated WebKit, pre ES5, to work with Browserify
    singleRun: true,
    customLaunchers: {
        Chrome_without_sandbox: {
            base: 'Chrome',
            flags: ['--no-sandbox'] // w/ sandbox it fails under Docker
        }
    },
    frameworks: ['mocha'],
    files: ['./app/w/tests/**/*-test.js'],
    webpack: webpackConfig,
    webpackMiddleware: {
        noInfo: true
    },
    preprocessors: {
        './app/w/tests/**/*-test.js' : ['webpack']
    }
  });
};

I tried loading files with require.context and bundle them, but the result is the same.. so I figured the issue could be with what MemoryFileSystem expects as input.

webpack.config.js

var webpack = require('webpack');
var bower_dir = __dirname + '/bower_components';
var config = {
  //devtool: 'cheap-module-eval-source-map',
  devtool: 'eval',
  entry: {
    app: ['webpack/hot/dev-server', './app/w/scripts/app.js']
  },
  resolve: { alias: {} },
  output: {
    path: './app/w/dist',
    filename: 'app.js',
    publicPath: '/dist/'
  },
  module: {
    noParse: [],
    loaders: [
      { test: /\.js$/,   loader: 'eslint!babel?optional[]=runtime', exclude: /node_modules/},
      { test: /\.json$/, loader: 'json'},
      { test: /\.png$/,  loader: "url?limit=10000&mimetype=image/png" },
      { test: /\.woff$/, loader: "url?limit=10000&mimetype=application/font-woff" },
      { test: /\.ttf$/,  loader: "url?limit=10000&mimetype=application/octet-stream" },
      { test: /\.eot$/,  loader: "file" },
      { test: /\.svg$/,  loader: "url?limit=10000&mimetype=image/svg+xml" },
      { test: /\.less/,  loader: 'style!css!less'}

    ]
  },
  plugins: new webpack.optimize.UglifyJsPlugin({
    minimize: true,
    sourceMap: false,
  })
};

module.exports = config;

Error log:

ERROR [karma]: [Error: Path is a file '/_karma_webpack_/app/w/tests/components']
Error: Path is a file '/_karma_webpack_/app/w/tests/components'
    at MemoryFileSystem.mkdirpSync (/Users/magnuslien/Documents/internprosjekter/woop-frontend/node_modules/karma-webpack/node_modules/webpack-dev-middleware/node_modules/memory-fs/lib/MemoryFileSystem.js:116:10)
    at MemoryFileSystem.(anonymous function) [as mkdirp] (/Users/magnuslien/Documents/internprosjekter/woop-frontend/node_modules/karma-webpack/node_modules/webpack-dev-middleware/node_modules/memory-fs/lib/MemoryFileSystem.js:193:34)
    at Tapable.<anonymous> (/Users/magnuslien/Documents/internprosjekter/woop-frontend/node_modules/webpack/lib/Compiler.js:244:27)
    at /Users/magnuslien/Documents/internprosjekter/woop-frontend/node_modules/webpack/node_modules/async/lib/async.js:187:20
    at /Users/magnuslien/Documents/internprosjekter/woop-frontend/node_modules/webpack/node_modules/async/lib/async.js:239:13
    at _arrayEach (/Users/magnuslien/Documents/internprosjekter/woop-frontend/node_modules/webpack/node_modules/async/lib/async.js:91:13)
    at _each (/Users/magnuslien/Documents/internprosjekter/woop-frontend/node_modules/webpack/node_modules/async/lib/async.js:82:13)
    at Object.async.forEachOf.async.eachOf (/Users/magnuslien/Documents/internprosjekter/woop-frontend/node_modules/webpack/node_modules/async/lib/async.js:238:9)
    at Object.async.forEach.async.each (/Users/magnuslien/Documents/internprosjekter/woop-frontend/node_modules/webpack/node_modules/async/lib/async.js:215:22)
    at Tapable.emitFiles (/Users/magnuslien/Documents/internprosjekter/woop-frontend/node_modules/webpack/lib/Compiler.js:234:20)

package.json

 "devDependencies": {
    "babel-loader": "^5.3.2",
    "browserify": "^11.0.1",
    "karma": "^0.12.31",
    "karma-chrome-launcher": "^0.2.0",
    "karma-mocha": "^0.2.0",
    "karma-sourcemap-loader": "^0.3.5",
    "karma-webpack": "^1.7.0",
    "mocha": "^2.2.5",
    "proxyquireify": "^3.0.0",
    "webpack": "^1.11.0",
    "webpack-dev-server": "^1.10.1"
  }

Answer 1

I had the same problem.

Somehow the webpack.config.js is not allowed to have the entry app.

Add

webpackConfig.entry = {};

just under the line

webpackConfig.devtool = 'inline-source-map'; in your karma.conf.js

This worked for me