カルマ+モカ+ Browserify + ES6テストスタックのセットアップの問題

Question

私はこれらのガイドラインに沿って検証可能なフロントエンドのプロジェクトを作成しようとしています：

• は、各コンポーネントのフォルダに__test__のフォルダにコンポーネントアーキテクチャに反応。
• テストではES6モジュールを使用しています。
• browserifyは、すべてのファイルを1つのファイルにまとめます。
• カルマはテストのためにバンドルを使用します。

これは私のkarma.conf.jsです：

module.exports = function (karma) { 
    const testFiles = __dirname + '/proj/static/src/**/__tests__/*.js'; 

    karma.set({ 
     frameworks: ['browserify', 'mocha'], 
     browsers: ['Chrome'], 
     files: [ 
      testFiles 
     ], 
     logLevel: 'LOG_DEBUG', 
     preprocessors: { 
      testFiles: ['browserify'], 
     }, 
     reporters: ['dots'], 
     singleRun: true, 

     browserify: { 
      debug: true, 
      transform: [ 'babelify' ] 
     }, 
    }); 
}; 

これはしかし、カルマを起動した後、私はこのエラーを取得する私の.babelrc

{ 
    presets: ['es2015', 'react'] 
} 

です：明らかに

... 
Uncaught SyntaxError: Unexpected token import 
    at proj/static/src/js/some-component/__tests__/some.test.js:1 

コード蒸散しない。私は複数のチュートリアルを読んでおり、すべて異なる技術を使用しています。任意のアイデアをどのように問題を解決するには？

P.S.私はまだフロントエンドのTDDで新鮮です。

編集 これらはインストールNPMの依存関係：

"babel-preset-es2015": "^6.18.0", 
"babel-preset-react": "^6.16.0", 
"babelify": "^7.3.0", 
"browserify": "^13.1.1", 
"expect": "^1.20.2", 
"karma": "^1.3.0", 
"karma-browserify": "^5.1.0", 
"karma-chrome-launcher": "^2.0.0", 
"karma-cli": "^1.0.1", 
"karma-mocha": "^1.3.0", 
"mocha": "^3.1.2", 
"reactify": "^1.1.1", 
"watchify": "^3.7.0" 

Answer 1

問題はtestFilesがpreprocessors構成でのキーの値であるということです。事前処理されるファイルと一致するグロブになるには、キーの値が必要です。ファイルが一致していないため、ファイルは前処理されていません。

preprocessors: { 
    '**/*.js': ['browserify'] 
} 

あなたの質問は、プロジェクトのディレクトリ構造についての詳細には触れませんので、私はすべての.jsファイルにマッチするグロブを提案しました：

私はこれをしようとするだろう。あなたは、変換する必要があるあなたのソースファイルだけにマッチするように修正することができます。

グロブは、テストだけでなく、すべてのソースファイルに一致する必要があることに注意してください。