Karma + Webpack (babel-loader) + ES6 "Importation inattendue de token"

/ Edit: j'ai dévêtu complètement la configuration pour démontrer le problème. J'ai également téléchargé un projet de travail pour GitHub que vous pouvez cocher, afin que vous puissiez voir par vous-même.

Cas d'utilisation problématique sur GitHub: webpack-angular15-es6-karma ( télécharger l'archive 7z )

npm install npm run build npm run test 

Je sais qu'il y a quelques questions connexes, mais le monde se déplace si vite et il y a tellement de facteurs / dépendances que je ne peux pas résoudre ce problème avec les solutions proposées.

J'ai une configuration de Webpack qui prend soin de tout mon code source et ça marche très bien.

Pour les tests, je réutilise cette configuration pour m'occuper d'un seul script d'entrée central qui charge les sources et les fichiers de test. Je n'ai pas trouvé d'autre moyen d'importer des modules à partir de mon code source dans mon code de test pour les tests.

Karma construit bien la réutilisation de ma configuration de serveur web, mais le navigateur signale une erreur dès qu'elle est ouverte.

Le code source utilise les importations ES6 et les formulaires Web nécessitent des instructions.

Package.json:

Npm run build >>> webpack –config webpack.config.js –display-error-details –colors –progress

Npm test de course >>> démarrage du karma –single-run –no-auto-watch karma.config.js

 { "name": "ProblemDemo", "scripts": { "build": "rimraf dist && webpack --config webpack.config.js --display-error-details --colors --progress", "test": "karma start --single-run --no-auto-watch karma.config.js" }, "dependencies": { "angular": "^1.5.7", "angular-filter": "^0.5.8" }, "devDependencies": { "webpack": "1.13.1", "html-loader": "0.4.3", "babel-loader": "5.3.2", "html-webpack-plugin": "1.6.1", "rimraf": "^2.5.3", "run-sequence": "1.1.2", "jasmine-core": "^2.4.1", "karma": "^0.13.19", "karma-chrome-launcher": "^0.2.2", "karma-coverage": "^0.5.3", "karma-jasmine": "^0.3.6", "karma-webpack": "^1.7.0", "loader-utils": "^0.2.12" } } 

Karma.config.js:

 module.exports = function (config) { config.set({ browsers: ['Chrome'], coverageReporter: { reporters: [ { type: 'html', subdir: 'html' }, { type: 'lcovonly', subdir: '.' } ] }, files: ['./tests.webpack.js'], frameworks: ['jasmine'], preprocessors: { './tests.webpack.js': ['webpack'] }, reporters: ['progress', 'coverage'], webpack: configureWebpack() }); function configureWebpack(webpackConfigFunction) { var webpackConfig = require('./webpack.config'); webpackConfig.entry = undefined; // karma will pass the proper argument for entry return webpackConfig; } }; 

Comme vous pouvez le voir, je n'utilise pas les plugins karma-babel: je ne sais pas pourquoi j'aurais besoin de ceux-là, vu que j'ai déjà une version fonctionnelle pour le code avec des instructions d'importation / besoin.

Test_entry.js:

 var testsContext = require.context('./test', true, /\.js$/); testsContext.keys().forEach(testsContext); var srcContext = require.context('./app', true, /\.js$/); srcContext.keys().forEach(srcContext); 

La compilation du pack web réussit sans attelage (et émet le morceau test_entry.js de la taille attendue du fichier), mais Karma ouvre Chrome et dès que la page est chargée, je suis salué avec l'erreur suivante:

Chrome 51.0.2704 (Windows 7 0.0.0) ERREUR

Uncaught SyntaxError: importation de token inattendue

À la_path / test_entry.js: 41

Test_entry.js n'a pas de 41 lignes et ne contient pas d'instructions d'importation et, de toute façon, elles auraient dû être surveillées . Qu'est-ce qui ne va pas?

Dans le cas où vous souhaitez connaître la configuration du serveur web ainsi:

 // webpack.config.js, works perfectly for normal builds but not with Karma var path = require('path'); var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { debug: true, entry: { app: ['./app/index.js'], vendor: ['./app/vendor.js'] }, output: { path: path.join(__dirname, 'dist'), filename: 'js/[name].js' }, plugins: [ new HtmlWebpackPlugin({ template: './app/index.html', inject: 'body', minify: false }), new webpack.optimize.CommonsChunkPlugin('vendor', 'js/vendor.js'), new webpack.SourceMapDevToolPlugin({ filename: '[file].map', exclude: /vendor/ }) ], resolve: { extensions: ['', '.js'], alias: { app: path.join(__dirname, 'app') } }, module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', include: path.join(__dirname, 'app'), exclude: path.join(__dirname, 'node_modules') }, { test: /\.html$/, loader: 'html-loader' } ] }, resolveLoader: { root: path.join(__dirname, 'node_modules') }, }; 

Dans le cas où vous voulez voir mon test, requis par test_entry.js , que je ne peux pas exécuter:

 import jasmine from 'jasmine-core'; import readableNumberFilter from './file_path/readableNumber.filter'; // for some reason needed, or else unexpected token errors during build: var describe = jasmine.describe; var it = jasmine.it; var expect = jasmine.expect; describe('readableNumber Filter', function () { describe('readableNumber Filter formatting', () => { it('it should support optional arguments', function () { expect(readableNumberFilter("50.3")).toEqual("50,30"); }); }); }); 


Edit 20-7-2016

Le problème persiste également avec les dépendances mises à jour de babel-loader (y compris l'option es2015 presets). "Babel-core": "^ 6.11.4", "babel-loader": "^ 6.2.4", "babel-preset-es2015": "^ 6.9.0", "babel-core"

Le problème est que vous ne transpilez pas vos sources de test – le fichier src/global/filters/dateFormat.filter.spec.js n'a pas été transpilé.

Vous devez modifier cette configuration de chargeur:

 { test: /\.js$/, loader: 'babel-loader', include: path.join(__dirname, 'app'), exclude: path.join(__dirname, 'node_modules') }, 

Comme suite, pour que cela fonctionne:

 { test: /\.js$/, loader: 'babel-loader', include: [ path.join(__dirname, 'app'), path.join(__dirname, 'test') ], exclude: path.join(__dirname, 'node_modules') }, 

Il y a également un problème avec le plugin webpack.optimize.CommonsChunkPlugin – il devrait être désactivé pour le karma: https://github.com/webpack/karma-webpack/issues/22

Que, après avoir désactivé ce plugin, il y a des erreurs dans votre fichier de test:

 import jasmine from 'jasmine-core'; import readableNumberFilter from 'readableNumber.filter'; var describe = jasmine.describe; var it = jasmine.it; var expect = jasmine.expect; describe('readableNumber Filter', function () { describe('readableNumber Filter formatting', () => { it('it should support optional arguments', function () { expect(readableNumberFilter("50.3")).toEqual("50,30"); }); }); }); 

Il y a peu d'erreurs dans ce test:

  1. import jasmine from 'jasmine-core'; – vous ne devriez pas le faire (le karma le fera, il ajoutera également describe , expect )
  2. import readableNumberFilter from 'readableNumber.filter'; – Ce n'est pas la façon dont vous pouvez instancier les services angulaires, pour les tester.

Vous devriez faire quelque chose comme ceci (ce test fonctionne réellement avec tous les correctifs mentionnés ci-dessus):

 import angular from 'angular'; import 'angular-mocks'; import testModule from '../../../../app/src/global/index'; const { module, inject } = angular.mock; describe('readableNumber Filter', () => { beforeEach(module(testModule)); let $filter; beforeEach(inject((_$filter_) => { $filter = _$filter_; })); describe('readableNumber Filter formatting', () => { it('it should support optional arguments', () => { const result = $filter('readableNumber')("50.3"); expect(result).toEqual("50,30"); }); }); }); 

Remarque: vous devrez installer des modulations angular-mocks module;


Pour prendre en charge les rapports de couverture de code, vous devrez configurer votre configuration de test webpack pour utiliser quelque chose comme babel-istanbul-loader . En passant, vous devrez également passer à Babel6.

Aussi, vous devrez rendre la configuration du serveur Web plus configurable (les configurations pour les tests et la production doivent être légèrement différentes).

Je vous ai envoyé une demande de tirage avec tous ces correctifs: https://github.com/bbottema/webpack-angular15-es6-karma/pull/1


A propos de la construction d'un projet angulaire 1.x avec un webpack, y compris des tests avec couverture de code via karma – peut-être vous seriez intéressé par mon projet: https://github.com/zxbodya/angulaire-webpack-seed – c'est un modèle de démarrage avec tous les besoins Configurations.