javascript - react - Karma+Webpack(babel-loader)+ES6 "Importación de token inesperada"

webpack babel

Question

/ edit: eliminé la configuración completamente al mínimo demostrando el problema. También subí un proyecto de trabajo a GitHub que puedes pagar, para que puedas verlo por ti mismo.

Caso de uso problemático en GitHub: webpack-angular15-es6-karma ( descargar el archivo 7z )

npm install
npm run build
npm run test

Sé que hay un par de preguntas relacionadas, pero el mundo se está moviendo tan rápido y hay tantos factores / dependencias que no puedo resolver este problema con las soluciones actuales propuestas.

Tengo una configuración de paquete web que se ocupa de todo mi código fuente y funciona muy bien.

Para las pruebas, reutilizo esa configuración para ocuparme de un solo script de entrada central que carga tanto las fuentes como los archivos de prueba. No pude encontrar otra forma de importar módulos de mi código fuente a mi código de prueba para probarlos.

Karma construye bien reutilizando la configuración de mi paquete web, pero el navegador reporta un error tan pronto como se abre.

El código fuente utiliza las importaciones ES6 y el paquete web requiere declaraciones.

paquete.json:

npm ejecutar compilación >>> webpack --config webpack.config.js --display-error-details --colors --progress

prueba de ejecución de npm >>> karma start --super-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;
    }
};

Como puede ver, no estoy usando los complementos de karma-babel: no estoy seguro de por qué los necesitaría, ya que ya tengo una compilación en funcionamiento para el código con declaraciones de importación / requerimiento.

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 compilación del paquete web se realiza sin problemas (y emite la porción test_entry.js del tamaño esperado del archivo), pero luego Karma abre Chrome y, tan pronto como se carga la página, me aparece el siguiente error:

ERROR Chrome 51.0.2704 (Windows 7 0.0.0)

SyntaxError no capturado: importación de token inesperada

en the_path / test_entry.js: 41

test_entry.js no tiene 41 líneas y no contiene instrucciones de importación y de todos modos deberían haberse resuelto . ¿Qué está mal?

En caso de que quieras conocer la configuración del webpack también:

// 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'')
 },
};

En caso de que quiera ver mi prueba, requerida por test_entry.js , que no puedo ejecutar:

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");
  });
 });
});

editar 20-7-2016

El problema persiste también con las dependencias actualizadas de babel-loader (incluida la configuración de la opción predeterminada de es2015). "babel-core": "^ 6.11.4", "babel-loader": "^ 6.2.4", "babel-preset-es2015": "^ 6.9.0",

Answer 1

El problema es que no está transpilando las fuentes de prueba; el archivo src/global/filters/dateFormat.filter.spec.js no se ha transpilado.

Necesitas cambiar esta configuración del cargador:

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

De la siguiente manera, para que funcione:

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

También hay un problema con el plugin webpack.optimize.CommonsChunkPlugin : debe estar desactivado para karma: https://github.com/webpack/karma-webpack/issues/22

Después de deshabilitar este complemento, hay errores en su archivo de prueba:

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");
        });
    });
});

Hay pocos errores en esta prueba:

1. import jasmine from ''jasmine-core''; - No debes hacer eso (el karma lo hará, también lo agregará, it describe y expect )
2. import readableNumberFilter from ''readableNumber.filter''; - No es la forma en que puedes instanciar los servicios angulares, para probarlos.

Debería hacer algo como esto (esta prueba realmente funciona con todos los arreglos mencionados anteriormente):

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");
        });
    });
});

Aviso: necesitarás instalar el módulo angular-mocks ;

Para admitir los informes de cobertura de código, deberá configurar la configuración de su paquete de prueba para usar algo como babel-istanbul-loader . Por cierto, también necesitarás actualizar a Babel6.

También deberá hacer que la configuración del paquete web sea más configurable (las configuraciones para pruebas y producción deben ser ligeramente diferentes).

Le he enviado una solicitud de extracción con todas estas correcciones: https://github.com/bbottema/webpack-angular15-es6-karma/pull/1

Acerca de la creación del proyecto angular 1.x con webpack, incluidas las pruebas con cobertura de código a través del karma. Tal vez le interese mi proyecto: https://github.com/zxbodya/angular-webpack-seed . Es una plantilla de inicio con todo lo necesario. configuraciones