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


/ edit: eliminé la configuración al mínimo para demostrar 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 avanza tan rápido y hay tantos factores / dependencias que no puedo solucionar este problema con las soluciones actuales propuestas.

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

Para las pruebas, reutilizo esa configuración para encargarme 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 en mi código de prueba para probar.

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

El código fuente utiliza las importaciones de ES6 y las declaraciones requeridas de la carpeta web.

package.json:

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

npm run test >>> karma start --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;
    }
};

Como puede ver, no estoy usando los complementos de karma-babel: no estoy seguro de por qué los necesitaría, dado que ya tengo una compilación activa para el código con import / require statements.

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 construcción del paquete web tiene éxito sin problemas (y emite test_entry.js trozo de tamaño de archivo esperado), pero luego Karma abre Chrome y tan pronto como se carga la página, recibo el siguiente error:

Chrome 51.0.2704 (Windows 7 0.0.0) ERROR

Untaught SyntaxError: importación de token inesperado

en the_path / test_entry.js: 41

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

En caso de que quiera conocer la configuración de la carpeta web 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 con las dependencias babel-loader actualizadas también (incluida la configuración de la opción preestablecidos es2015). "babel-core": "^ 6.11.4", "babel-loader": "^ 6.2.4", "babel-preset-es2015": "^ 6.9.0",


18
2017-07-19 14:30


origen


Respuestas:


El problema es que no está transfiriendo sus fuentes de prueba - archivo src/global/filters/dateFormat.filter.spec.js no fue transpilado

Necesita cambiar la configuración de este cargador:

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

Como sigue, 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 webpack.optimize.CommonsChunkPlugin complemento: debe estar desactivado para el karma: https://github.com/webpack/karma-webpack/issues/22

Luego 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 deberías hacer eso (el karma hará, también agregará describe, it y expect)
  2. import readableNumberFilter from 'readableNumber.filter'; - No es la forma en que puede crear instancias de servicios angulares, para probarlos.

Deberías hacer algo como esto (esta prueba funciona con todas las soluciones mencionadas 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á instalar el módulo angular-mocks;


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

También tendrá que hacer que la configuración del paquete web sea más configurable (las configuraciones para las pruebas y la 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 construir un proyecto angular 1.x con un paquete web, incluidas las pruebas con cobertura de código a través del karma, tal vez le interesaría mi proyecto: https://github.com/zxbodya/angular-webpack-seed - es la plantilla de inicio con todas las configuraciones requeridas.


28
2017-07-21 23:13