38

Karma-babel-preprocessorと単純な ES6 ジェネレーターを実行しようとしています。

//require('babel/polyfill');

  describe("how Generators work", function() {
    it("will allow generator functions", function() {
      /*function * numbers() {
        yield 1;
        yield 2;
        yield 3;
      };*/


      let numbers = {
        [Symbol.iterator]:function*(){
            yield 1;
            yield 2;
            yield 3;
          }
      }

      let sum = 0;

      for(n of numbers){
        sum += n;
      }

      expect(sum).toBe(6);
    });
  });

これから、babel を使用してテスト ファイル (ES6 => ES5) を生成しました。

babel src --watch --out-dir tests

次に、実行するkarma startとエラーが発生します：

ReferenceError: regeneratorRuntime が定義されていません".

karma.conf.js の関連ビット:

  // list of files / patterns to load in the browser
    files: [
      'test-main.js',
      {pattern: 'tests/*.js', included: true}
    ],


    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
            'src/*.js': ['babel']
    },
        'babelPreprocessor': {
      options: {
        sourceMap: 'inline'
      },
      filename: function(file) {
        return file.originalPath.replace(/\.js$/, '.es5.js');
      },
      sourceFileName: function(file) {
        return file.originalPath;
      }
    },


// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],

github の完全なプロジェクト

矢印を含む多くの ES6 機能を使用できます。ジェネレーターには行かないでください。

4

5 に答える 5

27

私のプロジェクトでは別のアプローチ** を取っていますが、Babel で Karma を使用していますが、あなたは私と同じ問題を抱えているのではないかと思います: Babel ポリフィルがロードされていないため、サポートされている機能が得られません。 (ジェネレーターを動作させるために Babel が使用するカスタム再生ランタイムを含む)。

1 つのアプローチは、ポリフィルを含める方法を見つけることです。おそらく、files 配列を介して Karma に供給します。

files: [
  'path/to/browser-polyfill.js', // edited: polyfill => browser-polyfill per P.Brian.Mackey's answer
  ...

別のアプローチとして、Babel のランタイム トランスフォーマーを使用することもできます[編集: ドキュメントを読み直すと、browserify/webpack/etc. require()トランスフォーマーによって作成された呼び出しを処理する]; そのドキュメントに従って、

runtimeオプションのトランスフォーマーは、次の 3 つのことを行います。

  • babel-runtime/regeneratorジェネレーター/非同期関数を使用するときに自動的に必要になります。
  • babel-runtime/core-jsES6 の静的メソッドとビルトインを自動的に要求してマップします。
  • インラインのバベル ヘルパーを削除し、module babel-runtime/helpers代わりに を使用します。

私はこれについての経験はありませんが、設定にoptional: ['runtime']Babel ドキュメントのオプションを含めることで、そうすることができると思います。babelPreprocessor

'babelPreprocessor': {
  options: {
    optional: ['runtime'],  // per http://babeljs.io/docs/usage/options/
    sourceMap: 'inline'
  },
...

( ** 現在、私は jspm + jspm-karma + いくつかの構成を使用して、Babel ポリフィルを SystemJS にロードするようにしています。関連があるかどうか尋ねてください。詳しく説明します。 )

于 2015-03-11T04:31:36.740 に答える
4

Docs Linkに記載されているようkarma.conf.jsに追加するように変更しました：browser-polyfill

files: [
            'node_modules/babel/browser-polyfill.js',
      'test-main.js',
      {pattern: 'tests/*.js', included: true}
    ],

この変更の後、次の単体テストが Karma で機能します。

  describe("how Generators work", function() {
    it("will allow generator functions", function() {
     /*function* numbers(){
       yield 1;
       yield 2;
       yield 3;
     };*///Simplified syntax does not work

      let numbers = {
        [Symbol.iterator]:function*(){
            yield 1;
            yield 2;
            yield 3;
          }
      }

      let sum = 0;

      for(let num of numbers){
        sum += num;
      }

      expect(sum).toBe(6);
    });
  });
于 2015-03-11T14:01:08.470 に答える