title: Karma doesn't work with ES6
body: <p>I want to use karma as my js test environment but failed to configure it to work with ES6. </p>
  
  <p>Below is my test js file:</p>
  
  <pre><code>import { shallow } from 'enzyme';
  import React from 'react';
  
  describe('&lt;MyComponent /&gt;', () =&gt; {
  
    it('should render three &lt;Foo /&gt; components', () =&gt; {
      const wrapper = shallow(&lt;MyComponent /&gt;);
      expect(wrapper.find(Foo)).to.have.length(3);
    });
  });
  </code></pre>
  
  <p>When run karma start, I will get this error:</p>
  
  <p><strong>Uncaught SyntaxError: Unexpected token import
    at test/features/consulting/question/question.js:1</strong></p>
  
  <p>It seems that karma doesn't work with babel to compile ES6. What's wrong with my configuration?</p>
  
  <p>Below is my karma.conf.js:</p>
  
  <pre><code>var path = require('path');
  
  module.exports = function(config) {
    config.set({
  
      // base path that will be used to resolve all patterns (eg. files, exclude)
      basePath: '',
  
  
      // frameworks to use
      // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
      frameworks: ['jasmine'],
  
  
      // list of files / patterns to load in the browser
      files: [
        'test/**/*.js'
      ],
  
  
      // list of files to exclude
      exclude: [
      ],
  
  
      // preprocess matching files before serving them to the browser
      // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
      preprocessors: {
      },
  
  
      // test results reporter to use
      // possible values: 'dots', 'progress'
      // available reporters: https://npmjs.org/browse/keyword/karma-reporter
      reporters: ['progress'],
  
  
      // web server port
      port: 9876,
  
  
      // enable / disable colors in the output (reporters and logs)
      colors: true,
  
  
      // level of logging
      // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
      logLevel: config.LOG_INFO,
  
  
      // enable / disable watching file and executing tests whenever any file changes
      autoWatch: true,
  
  
      // start these browsers
      // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
      browsers: ['Chrome'],
  
  
      // Continuous Integration mode
      // if true, Karma captures browsers, runs the tests and exits
      singleRun: false,
  
      // Concurrency level
      // how many browser should be started simultaneous
      concurrency: Infinity,
  
      webpack: { //kind of a copy of your webpack config
        devtool: 'inline-source-map', //just do inline source maps instead of the default
        module: {
          loaders: [
            {
              test: /\.js$/,
              loader: 'babel-loader?presets=es2015',
              exclude: path.resolve(__dirname, 'node_modules'),
              include: [
                path.join(__dirname, 'app'),
                path.join(__dirname, 'test')
              ],
            },
            {
              test: /\.json$/,
              loader: 'json',
            },
          ]
        },
        externals: {
          'react/lib/ExecutionEnvironment': true,
          'react/lib/ReactContext': true
        }
      },
  
      webpackServer: {
        noInfo: true //please don't spam the console when running in karma!
      },
    })
  }
  </code></pre>
  
  <p>and I have .babelrc file as below:</p>
  
  <pre><code>{
  
  
  "presets": [
      "es2015",
      "react",
      "stage-2"
    ]
  
  }
  </code></pre>
  
  <p><strong>EDIT1</strong>
  Below is my webpack config file. Since the webpack configuration is set on karma config file, do I need any configuration on webpack conf file?</p>
  
  <pre><code>const webpack = require('webpack');
  const path = require('path');
  const NpmInstallPlugin = require('npm-install-webpack-plugin');
  const WebpackShellPlugin = require('webpack-shell-plugin');
  var CompressionPlugin = require("compression-webpack-plugin");
  
  const PATHS = {
    react: path.join(__dirname, 'node_modules', 'react', 'dist', 'react.min.js'),
    app: path.join(__dirname, 'src'),
    build: path.join(__dirname, './dist')
  };
  
  module.exports = {
    entry: {
      app: './app/index.jsx',
      android: './app/utils/platform_android.js',
      ios: './app/utils/platform_ios.js',
      web: './app/utils/platform_web.js',
      wx: './app/utils/platform_wx.js',
      vendor: [
        'axios',
        'react',
        'react-dom',
        'react-redux',
        'react-router',
        'react-router-redux',
        'redux',
        'redux-thunk',
        'react-alert',
        'sha1',
        'moment',
        'nuka-carousel',
        'react-cookie',
        'react-spinkit',
        'react-tap-event-plugin',
        'react-tappable',
        'history',
        "react-pull-to-refresh",
        "react-infinite-scroller",
        'pingpp-js',
      ],
    },
    output: {
      path: PATHS.build,
      filename: '[name].bundle.js',
    },
    watch: false,
    devtool: 'source-map',
    relativeUrls: true,
    resolve: {
      extensions: ['', '.js', '.jsx', '.css', '.less'],
      modulesDirectories: ['node_modules'],
      alias: {
        normalize_css: __dirname + '/node_modules/normalize.css/normalize.css',
      }
    },
    module: {
      preLoaders: [
  
        {
          test: /\.js$/,
          loader: "source-map-loader"
        },
      ],
      loaders: [
  
        {
          test: /\.html$/,
          loader: 'file?name=[name].[ext]',
        },
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel-loader?presets=es2015',
        },
        {
          test: /\.less$/,
          loader: "style!css!less",
        },
        {test: /\.css$/, loader: 'style-loader!css-loader'},
        {test: /\.png$/, loader: "url-loader?limit=100000"},
        // {test: /\.(jpe?g|png|gif|svg)$/i, loader: "file-loader?name=/public/icons/[path]/[name].[ext]"},
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loaders: ['babel-loader?presets=es2015']
        },
        {
          test: /\.svg$/,
          loader: 'svg-sprite',
          include: /public\/icons/
        }
      ]
    },
    plugins: [
      new NpmInstallPlugin({
        save: true // --save
      }),
      new webpack.DefinePlugin({
        "process.env": {
          NODE_ENV: JSON.stringify("development")
        }
      }),
      new WebpackShellPlugin({
        onBuildStart: [''],
        onBuildEnd: [
          'cp ./dist/*.js ../assets/dist/;rm -fr dist/web;' +
          'mkdir -p dist/web/dist;cp ./dist/*.js ./dist/web/dist/;cp ./index.html ./dist/web/;cp -r public dist/web/',
        ]
      }),
      new CompressionPlugin(),
      new webpack.optimize.CommonsChunkPlugin(/* chunkName= */["vendor"], /* filename= */"[name].bundle.js", Infinity),
    ],
    devServer: {
      colors: true,
      contentBase: __dirname,
      historyApiFallback: true,
      hot: true,
      inline: true,
      port: 9093,
      progress: true,
      stats: {
        cached: false
      }
    }
  }
  </code></pre>