web-dev-qa-db-ja.com

Babel [karma-babel-preprocessor]カルマテスト用にES6-> ES5を変換しない

テストにモカとチャイを使ったカルマをインストールしました。 ES6ファイルをES5に変換して実行するために、karma-babel-preprocessorを使用してbabelをkarmaに直接統合しようとしています。 mochaを個別に使用すると、babel、つまりmocha testコマンドで機能しますが、代わりにkarmaを使用しようとしますが機能しません。

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に変換されていないため、構文「export」はまだ存在しています。

変換に他のフレームワークを使用したくありません。 webpack、browserifyなど。

ありがとう！

javascripttestingmochakarma-runnerbabeljs
11
fl0shizzle

私は過去数時間同じ問題に苦しんでいます。あなたのユースケースが私のものと同じかどうかはわかりませんが、私はついにそれを理解しました。

テスト中のコード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";
13
awei

問題は、ブラウザーでCommonJSモジュールを実行できるようにファイルをバンドル/ラップしなかったことです（Babelはes2015モジュールをCommonJSにトランスパイルし、CJSはノードのデフォルトのモジュールシステムであり、Karmaがテストを実行するブラウザーではないため） 。したがって、オプションは次のとおりです。

0
Roman Bekkiev

プリセットだけでなく、まだバベルが必要だと思います。

npm i babel --save-dev

私のプロジェクトの1つでほぼ同じ構成を使用しています。つまり、karmaでファイルをその場で前処理できます。唯一の違いは、babeljsもインストールしたことです。

お役に立てれば。

乾杯

0
Csaba Vályi