Babel [karma-babel-preprocessor] Не конвертирует ES6-> ES5 для тестов кармы

Мы установили карму, которая использует мокко и чай для тестов. Мы пытаемся интегрировать babel прямо в карму, используя препроцессор karma-babel, чтобы преобразовать наши ES6 файлы в ES5 для запуска. Использование mocha индивидуально работает с babel, то есть командой mocha test, но мы пытаемся использовать карму, вместо этого она не работает.

karma.conf.js фрагмент:

frameworks: ['mocha', 'chai'],

// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
   'src/**/*.js': ['babel'],
   'test/**/*_spec.js': ['babel']
},

"babelPreprocessor": {
    options: {
        presets: ['es2015'],
        sourceMap: 'inline'
    },   
    filename: function(file) {
        return file.originalPath.replace(/\.js$/, '.es5.js');
    },
    sourceFileName: function(file) {
        return file.originalPath;
    }
},

// list of files / patterns to load in the browser
files: [
  'src/**/*.js',
  'test/**/*_spec.js'
],

package.json:

"scripts": {
  "test": "./node_modules/karma/bin/karma start karma.conf.js"
},

"babel": {
  "presets": ["es2015"]
},

"devDependencies": {
  "babel-preset-es2015": "^6.1.18",
  "chai": "^3.4.1",
  "karma": "^0.13.15",
  "karma-babel-preprocessor": "^6.0.1",
  "karma-chai": "^0.1.0",
  "karma-mocha": "^0.2.1",
  "karma-phantomjs-launcher": "^0.2.1",
  "phantomjs": "^1.9.18",
  "redux": "^3.0.4"
}

Мы получаем следующую ошибку:

PhantomJS 1.9.8 (Mac OS X 0.0.0) ERROR
  ReferenceError: Can't find variable: exports
  at Users/alexgurr/BT/FutureVoice/trunk/Portal/server/src/login.es5.js:3

Когда мы оцениваем загружаемые файлы JS, они не были преобразованы в ES5, поэтому синтаксис "экспорт" все еще присутствует.

Мы не хотим использовать другие преобразования для преобразования, т.е. веб-пакет, браузер и т.д.

Спасибо!

Ответы

Ответ 1

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

Проверяемый код src/foo.js:

var foo = "foo value";
export default foo;

Тестовый код tests/foo.spec.js:

import foo from "../src/foo.js";
describe('Foo', function() {
    it('should be "foo value"', function() {
        expect(foo).toBe('foo value');
    });
});

karma.conf.js файл до:

{
    // other configs
    files: [
       'src/**/*.js',
       'tests/**/*.spec.js',
    ],
    preprocessors: {
       'src/**/*.js': ['babel'],
       'tests/**/*.spec.js': ['babel'],
    },

    babelPreprocessor: {
        options: {
            "presets": ["es2015"]
        }
    }
}

Это дало ошибку ReferenceError: Can't find variable: exports, которую вы видели.

Исправление:

  • npm install --save-dev babel-plugin-transform-es2015-modules-umd

  • Добавьте следующее в karma.conf.js

    babelPreprocessor: {
    options: {
        "presets": ["es2015"],
        "plugins": ["transform-es2015-modules-umd"]
    }
}

Тогда ошибка исчезла.

Также обратите внимание, что следующие объявления export (которые, я считаю, должны быть правильными) не работают.

// exports an object
export default var foo = "something";

// exports undefined
export var bar = "something else";

Ответ 2

Я думаю, что вам все еще нужен babel, а не только пресет.

npm i babel --save-dev

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

Надеюсь, что это поможет.

Приветствия

Ответ 3

Проблема в том, что вы все еще не собирали/не переносили файлы, чтобы иметь возможность запускать модули CommonJS в браузере (поскольку Babel transpile es2015 модулей в CommonJS и CJS является модульной системой по умолчанию для node, а не для браузеров, где Карма выполняет свои тесты). Итак, ваши варианты: