I am building a webpack and angular based application. I am trying to add Karma for unit testing using Mocha and Chai. However, when I try to run my tests, I get the following error:
Chrome 52.0.2743 (Linux 0.0.0) ERROR Uncaught SyntaxError: Unexpected token import at app/app.js:3
As you can see from the webpack configuration below, I am using babel-loader. I searched for this problem and searched here on StackOverflow, and although there are many results, none of the suggested solutions worked for me.
Here is my webpack configuration:
'use strict'; const webpack = require('webpack'); const path = require('path'); const autoprefixer = require('autoprefixer'); const APP = __dirname + '/app'; module.exports = { context: APP, entry: { app: ['webpack/hot/dev-server', './core/bootstrap.js',], }, output: { path: APP, filename: 'bundle.js', }, module: { loaders: [ { test: /\.html$/, loader: 'raw', }, { test: /\.(jpe?g|png|gif|svg)$/i, loaders: [ 'file?hash=sha512&digest=hex&name=img/[path][hash].[ext]', 'image-webpack', ], }, { test: /\.scss$/, loader: 'style!css!postcss!sass!sass-resources!scsslint', }, { test: /\.js$/, loader: 'ng-annotate!babel?presets[]=es2015!eslint', exclude: /node_modules/, }, ], }, postcss() { return [autoprefixer,]; }, sassResources: path.resolve(__dirname, './app/components/**/*.scss'), imageWebpackLoader: { pngquant: { quality: "65-90", speed: 4, }, svgo: { plugins: [ { removeViewBox: false, }, { removeEmptyAttrs: false, }, ], }, }, plugins: [ new webpack.optimize.UglifyJsPlugin({ minimize: true, output: { comments: false, }, compressor: { warnings: false, }, }), ], };
My karma configuration:
const webpackConfig = require('./webpack.config.js'); webpackConfig.entry = {}; module.exports = function(config) { config.set({ basePath: '', frameworks: ['mocha', 'chai',], files: [ 'app/**/*.js', 'unit_testing/**/*.test.js', ], exclude: [ ], preprocessors: { 'spec.bundle.js': ['webpack',], }, webpack: webpackConfig, reporters: ['progress',], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: false, browsers: ['Chrome',], singleRun: true, concurrency: Infinity, }); };
And offensive app.js:
// Controllers import homeCtrl from './components/home/homeCtrl.js'; // Services import Person from './components/services/person.service.js'; (function() { 'use strict'; const app = angular.module('app', ['ui.router',]); app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/'); $stateProvider.state('home', { url: '/', template: require('./components/home/home.html'), controller: 'homeCtrl', }); },]); app.controller('homeCtrl', homeCtrl); app.service('Person', Person); module.exports = app; }());
My package.json
{ "name": "odsc-webpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "e2e": "./node_modules/.bin/protractor", "e2e:local": "npm run e2e e2e.local.config.js", "e2e:check": "npm run e2e e2e.check.config.js", "test": "echo \"Error: no test specified\" && exit 1", "build": "node_modules/.bin/webpack", "dev": "webpack-dev-server --devtool eval --config webpack.config.js --progress --colors --hot --content-base app/ --host 0.0.0.0", "eslint": "eslint ./app", "scss-lint": "scss-lint", "lint": "npm run eslint && npm run scss-lint", "webdriver-manager": "./node_modules/.bin/webdriver-manager", "webdriver-update": "npm run webdriver-manager update" }, "pre-commit": [ "lint" ], "author": "", "license": "ISC", "devDependencies": { "angular": "^1.5.8", "angular-mocks": "^1.5.8", "angular-ui-router": "^0.3.1", "autoprefixer": "^6.4.0", "babel-core": "^6.14.0", "babel-loader": "^6.2.5", "babel-preset-es2015": "^6.14.0", "babel-preset-stage-0": "^6.5.0", "chai": "^3.5.0", "chai-as-promised": "^5.3.0", "css-loader": "^0.24.0", "cucumber": "^1.2.2", "eslint": "^3.4.0", "eslint-loader": "^1.5.0", "image-webpack-loader": "^2.0.0", "karma": "^1.2.0", "karma-chai": "^0.1.0", "karma-chrome-launcher": "^2.0.0", "karma-mocha": "^1.1.1", "karma-webpack": "^1.8.0", "mocha": "^3.0.2", "ng-annotate-loader": "^0.1.1", "node-sass": "^3.8.0", "postcss-loader": "^0.11.1", "pre-commit": "^1.1.3", "protractor": "^4.0.4", "protractor-cucumber-framework": "^0.6.0", "raw-loader": "^0.5.1", "sass-loader": "^4.0.0", "sass-resources-loader": "^1.1.0", "scsslint-loader": "^0.1.1", "style-loader": "^0.13.1", "webpack": "^1.13.2", "webpack-dev-server": "^1.15.0" } }
.babelrc
{ "presets": ["es2015", "stage-0"] }