カルマで一緒に働くブラウジング、ベベル、カバレッジを取得する方法

Question

ノードライブラリを一緒に正しく動作させるのに疲れています...しかし、それは仕事の一部なので、ここに行く...

ブラウザ用のES6アプリケーションがあります。私は、私のアプリケーションがES5で書かれた時から持ち出している私のファイルのための単体テストのセットを持っています。私はbrowserifyを使ってモジュールのインポート/エクスポートやディストリビューションのバンドルを扱います。これは、ブラウザでアプリケーションを実行するときに問題なく動作します。私は正常にソースと仕様ファイルをブラウズしてテストを実行することができ、テストに合格します。私は非常に、この作業を得ることに非常に近いです。

唯一の問題はカバレッジです。

require('/absolute/path/to/the/corresponding/file.js'); 

とそれぞれがちょうど1行であるため、適用範囲は明らかに、すべてのファイルのための100％として示しています。私が来た最も近いが、それぞれが次のようになり、ファイルを、生成されたカルマ-browserifyのカバレッジを示しています

これは私のkarma.conf.jsです：私は本当にこれらのライブラリのいずれかがどのように機能するか見当がつかないので、私はどこにこれをデバッグで起動するかわからない

import babelify from 'babelify'; 
import isparta from 'isparta'; 
import paths from './paths'; 


var normalizeBrowserName = (browser) => browser.toLowerCase().split(/[ /-]/)[0]; 

export default function(config) { 
    config.set({ 
     basePath: '..', 
     browsers: ['PhantomJS'], 
     frameworks: ['browserify', 'jasmine'], 
     files: paths.test.files, 
     preprocessors: { 
      'app/**/*.js': ['browserify', 'sourcemap', 'coverage'], 
      [paths.test.testFiles]: ['babel'], 
     }, 
     plugins: [ 
      'karma-babel-preprocessor', 
      'karma-browserify', 
      'karma-coverage', 
      'karma-jasmine', 
      'karma-junit-reporter', 
      'karma-phantomjs-launcher', 
      'karma-sourcemap-loader', 
     ], 
     autoWatch: false, 
     colors: false, 
     loggers: [{ type: 'console' }], 
     port: 9876, 
     reporters: ['progress', 'dots', 'junit', 'coverage'], 
     junitReporter: { 
      outputFile: paths.test.resultsOut, 
      suite: '', 
     }, 
     browserify: { 
      debug: true, 
      noParse: paths.js.noparse(), 
      configure: (bundle) => { 
       bundle.once('prebundle',() => bundle.transform(babelify.configure({ ignore: 'lib/!**!/!*' }))); 
      }, 
     }, 
     coverageReporter: { 
      instrumenters: { isparta }, 
      instrumenter: { 
       [paths.test.cover]: 'isparta', 
      }, 
      reporters: [ 
       { type: 'text', }, 
       { type: 'html', dir: paths.test.coverageOut, subdir: normalizeBrowserName }, 
       { type: 'cobertura', dir: paths.test.coverageOut, subdir: '.', file: 'coverage.xml' }, 
      ], 
     }, 
     logLevel: config.LOG_DEBUG, 
    }); 
}; 

。私は、プリプロセッサの順序が重要であることを理解しています。そのため、browserifyはソースファイル上で動作し、生成されたリンクファイルをソースマップジェネレータに送り、ソースマップジェネレータはその結果をカルマカバレッジに送ります。しかし、browserifyとカバレッジを処理するものとの間の通信の損失があります。 isparta（舞台裏でイスタンブールを使用している）は、browserifyが動作していることを知らないし、何が見えるのかわからない。

私は真剣にこのようなものがどのように動作するのかわからないので、この時点で私は散歩しています。

コード化されたモジュール化されたES6をテストした経験がある人は、正しい軌道上にいるかどうか教えてください。

Answer 1

これは私のために働く構成です.isparataではなくbrowserify-istanbulを使用しています。

var istanbul = require('browserify-istanbul'); 

module.exports = function(config) { 
    config.set({ 
     basePath: '', 
     frameworks: ['browserify', 'mocha'], 
     files: [ 
      'test/**/*Spec.js' 
     ], 
     exclude: [ 
      '**/*.sw?' 
     ], 
     preprocessors: { 
      'test/**/*Spec.js': ['browserify', 'coverage'] 
     }, 
     browserify: { 
      debug: true, 
      transform: [ 
      ['babelify', { 
       ignore: /node_modules/ 
      }], 
      istanbul({ 
       ignore: ['test/**', '**/node_modules/**'] 
      }) 
      ], 
      extensions: ['.jsx'] 
     }, 

     babelPreprocessor: { 
      options: { 
      sourceMap: 'inline' 
      }, 
      sourceFileName: function(file) { 
      return file.originalPath; 
      } 
     }, 
     coverageReporter: { 
      dir: 'coverage/', 
      reporters: [ 
      { type: 'text-summary' } 
      ] 
     }, 
     browserNoActivityTimeout: 180000, 
     reporters: ['coverage', 'progress'], 
     port: 9876, 
     colors: true, 
     logLevel: config.LOG_INFO, 
     autoWatch: true, 
     browsers: ['Chrome'], 
     singleRun: false 
    }); 
}; 

これは働くには大変な苦痛でした。助け

希望

Answer 2

HOW TO：カルマ+バベル+私は、私はそれを得たTHINK + Browserify +イスタンブール

を反応します。

私は、働いていない前の回答ではなく、モカのジャスミンを使用して行う必要がありますが、私はそれは、これらの設定で作業を得た場合、私は

わからないgus+overflow@mythril.co pingを実行していない場合。

必要なパッケージ：離れ明白から（、カルマ、ジャスミン、Browserifyに反応）

isparta    - an Istanbul instrumenter for ES6 
browserify-istanbul - a browserify transform 
babelify   - another browserify transform 
babel    - JS compiler 
babel-preset-2015 - ES6 compile preset 
babel-preset-react - React compile preset 

は、あなたのルートディレクトリにある.babelrcファイルを作成します。 私はツールの中にバベルのオプションを配置する場所にとして非常に混乱していたが、ほとんど（これら）バベルツールは.babelrc

{ 
    "presets": ["es2015", "react"], 
    "sourceMap": "inline" 
} 

karma.config.jsを探します：

const isparta = require('isparta'); 
const istanbul = require('browserify-istanbul'); 

module.exports = function (config) { 
    config.set({ 

    basePath: '', 

    browsers: ['Firefox', 'Chrome', 'PhantomJS', 'Safari'], 

    captureConsole: true, 

    clearContext: true, 

    colors: true, 

    files: [ 

     // you need this for Phantom 
     'node_modules/phantomjs-polyfill/bind-polyfill.js', 

     // import any third party libs, we bundle them in another gulp task 
     './build/libs/vendor-bundle.js', 

     // glob for spec files 
     '__PATH_TO_SPEC_FILES_/*.spec.js' 
    ], 

    frameworks: ['jasmine', 'browserify'], 

    logLevel: config.LOG_INFO, 

    preprocessors: { 

     // I had to NOT include coverage, the browserify transform will handle it 
     '__PATH_TO_SPEC_FILES_/*.spec.js': 'browserify' 
    }, 

    port: 9876, 

    reporters: ['progress', 'coverage'], 

    browserify: { 

     // we still use jQuery for some things :(
     // I don't think most people will need this configure section 
     configure: function (bundle) { 
     bundle.on('prebundle', function() { 
      bundle.external(['jquery']); 
     }); 
     }, 

     transform: [ 

     // this will transform your ES6 and/or JSX 
     ['babelify'], 

     // (I think) returns files readable by the reporters 
     istanbul({ 
      instrumenter: isparta, // <--module capable of reading babelified code 
      ignore: ['**/node_modules/**', '**/client-libs/**'] 
     }) 
     ], 

     // our spec files use jsx and so .js will need to be compiled too 
     extensions: ['.js', '.jsx'], 

     // paths that we can `require()` from 
     paths: [ 
     './node_modules', 
     './client-libs', 
     './universal' 
     ], 

     debug: true 
    }, 

    coverageReporter: { 
     reporters: [ 
     { type: 'html', dir: 'coverage/Client' }, 
     { type: 'text-summary' } 
     ] 
    } 
    }); 
}; 

カルマで

Answer 3

、私はそれがこのような何かを見てと思う（？）：

// Karma configuration 
'use strict'; 

    let babelify = require('babelify'); 
    let browserify = require('browserify'); 
    let browserifyBabalIstanbul = require('browserify-babel-istanbul'); 
    let isparta = require('isparta'); 

    browserify: { 
       debug: true, 
       transform: [ 
        browserifyBabalIstanbul({ 
         instrumenter: isparta, 
         instrumenterConfig: { babel: { presets: ["es2015"] } }, 
         ignore: ['**/node_modules/**', '**/unitest/**'] 
        }), 
        [ babelify, { presets: ["es2015"] } ] 
       ] 
      }, 

次のリンクを参照してください：Find a good way to get a coverage report with karma?