Karma + Webpack (babel-loader) + ES6 "Неожиданный импорт токена"

/edit: я полностью отключил конфигурацию до минимума, демонстрируя проблему. Я также загрузил рабочий проект в GitHub, который вы можете проверить, чтобы вы могли убедиться сами.

Я знаю, что есть несколько связанных вопросов, но мир движется так быстро, и существует так много факторов/зависимостей, что я не могу взломать эту проблему с текущими предлагаемыми решениями.

У меня есть конфигурация webpack, которая заботится обо всем моем исходном коде и отлично работает.

Для тестирования я повторно использую эту конфигурацию, чтобы позаботиться о единой центральной записи script, которая загружает как источники, так и тестовые файлы. Я не мог найти другой способ импортировать модули из моего исходного кода в свой тестовый код для тестирования.

Karma строит прекрасное повторное использование моей конфигурации webpack, но браузер сообщает об ошибке, как только она открывается.

Исходный код использует импорт ES6 и запросы на использование webpack.

Как вы можете видеть, я не использую плагины karma-babel: я не уверен, зачем мне это нужно, поскольку у меня уже есть рабочая сборка для кода с операторами import/require.

Сборка webpack выполняется без заминки (и испускает кусок ожидаемого файла test_entry.js), но затем Karma открывает Chrome, и как только загружается страница, я приветствую следующую ошибку:

test_entry.js не имеет 41 строки и не содержит операторов импорта, и в любом случае они должны были быть рассмотрены. Что не так?

Ответы

Ответ 1

Проблема заключается в том, что вы не транслируете свои тестовые источники - файл src/global/filters/dateFormat.filter.spec.js не был передан.

Вам нужно изменить конфигурацию загрузчика:

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

Как показано ниже, чтобы заставить его работать:

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

Также существует проблема с плагином webpack.optimize.CommonsChunkPlugin - он должен быть отключен для кармы: https://github.com/webpack/karma-webpack/issues/22

Чем после отключения этого плагина в вашем тестовом файле будут ошибки:

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

в этом тесте несколько ошибок:

import jasmine from 'jasmine-core'; - вы не должны этого делать (карма будет делать, также она добавит describe, it и expect)
import readableNumberFilter from 'readableNumber.filter'; - это не так, как вы можете создавать экземпляры служб angular для их тестирования.

Вы должны сделать что-то вроде этого (этот тест действительно работает со всеми исправлениями, упомянутыми выше):

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

Примечание: вам необходимо установить модуль angular-mocks;

Чтобы поддерживать отчет о покрытии кода, вам нужно настроить настройку конфигурации веб-пакета, чтобы использовать что-то вроде babel-istanbul-loader. Кстати, вам также нужно будет перейти на Babel6.

Также вам нужно будет настроить конфигурацию webpack config (конфигурации для тестирования и производства должны быть немного разными).

Я отправил вам запрос pull со всеми этими исправлениями: https://github.com/bbottema/webpack-angular15-es6-karma/pull/1

О создании проекта angular 1.x с webpack, включая тестирование с охватом кода через карму - возможно, вас будет интересовать мой проект: https://github.com/zxbodya/angular-webpack-seed - это стартовый шаблон со всеми необходимыми конфигурациями.