ReferenceError: Can't find variable: require [karma, webpack, mocha, phantomjs]

I am trying to setup karma for E2E testing of my Vue js app , but when I try to run npm test I get this error

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
ReferenceError: Can't find variable: require
at index.js:1

I am following official vue documentation on testing http://ift.tt/2sv3P3z

karma.config.js

var webpackConfig = require('../webpack.test.config.js')

// karma.conf.js
module.exports = function (config) {
  config.set({
    browsers: ['PhantomJS'],
    frameworks: ['jasmine'],
    // this is the entry file for all our tests.
    files: ['./index.js'],
    // we will pass the entry file to webpack for bundling.
    preprocessors: {
      './test/index.js': ['webpack']
    },
    // use the webpack config
    webpack: webpackConfig,
    // avoid walls of useless text
    webpackMiddleware: {
      noInfo: true
    },
    singleRun: true
  })
}

//index.js referenced in above karma config
var testsContext = require.context('.', true, /\.spec$/)    
testsContext.keys().forEach(testsContext)

//webpack.test.config.js
const webpack = require('webpack');
const path = require('path');
const projectRoot = path.resolve(__dirname, '../');

module.exports = {

  module: {

    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        },
        include: [
          projectRoot,
        ],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
   new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ],
  resolve: {
    extensions: ['.js', '.vue'],
  },
};