Wie kommt man browserify, babel, und die Abdeckung zusammen in Karma arbeiten

Question

I Knoten Bibliotheken zu versuchen bin wachsenden müde zu bekommen richtig zusammen zu arbeiten ... aber es ist ein Teil der Arbeit, geht so hier ...

Ich habe eine ES6-Anwendung für einen Browser. Ich habe eine Reihe von Komponententests für meine Dateien erstellt, die ich erstellt habe, als meine Anwendung in ES5 geschrieben wurde. Ich verwende browserify, um Module zu importieren/exportieren und meine Distribution zu bündeln. Dies funktioniert einwandfrei, wenn Sie die Anwendung im Browser ausführen. Ich kann die Quell- und Spezifikationsdateien erfolgreich browsen und die Tests durchführen, und die Tests bestehen. Ich bin sehr, sehr nah daran, das zu schaffen.

Das einzige Problem ist die Abdeckung. Der nächstgelegene ich gekommen ist Berichterstattung über die Karma-browserify zeigt generierten Dateien, die jeweils wie folgt aussehen:

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

und die Abdeckung zeigt offensichtlich als 100% für alle Dateien, weil jeder nur eine Zeile ist.

Das ist mein 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, 
    }); 
}; 

ich wirklich keine Ahnung, wie jeder dieser Bibliotheken arbeiten, so dass ich weiß nicht, wo in dem Debuggen dieses zu starten. Ich verstehe, dass die Reihenfolge der Preprozessoren von Bedeutung ist, so dass browserify auf den Quelldateien läuft, die resultierenden Link-Dateien in den Quellkartengenerator einspeist und der Quellkartengenerator dann das resultierende alles in Karma-Coverage einspeist. Aber es gibt einen Kommunikationsverlust zwischen browserify und allem, was mit der Abdeckung zu tun hat. Isparta (die Istanbul hinter den Kulissen verwendet) hat keine Ahnung, dass browserify läuft, und ich weiß nicht, was es sieht.

Ich bin an diesem Punkt weitschweifig, weil ich im Ernst nicht weiß, wie etwas von diesem Zeug funktioniert.

Wenn jemand Erfahrung mit dem Testen modularisierter ES6 MIT richtiger Codeabdeckung hat, lass es mich wissen, wenn ich auf dem richtigen Weg bin oder etwas anderes ausprobieren sollte.

Answer 1

Dies ist die Konfiguration, die für mich funktionierte, beachten Sie, dass ich browserify-istanbul statt isparata verwende.

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 
    }); 
}; 

es war ein massiven Schmerzen arbeiten zu bekommen.

Hoffnung, die

Answer 2

WIE hilft: Karma + Babel + Reagieren + Browserify + Istanbul IT

Ich glaube, ich habe.

Wenn ich nicht, ping mich gus+overflow@mythril.co

nicht sicher, ob die vorherige Antwort nicht funktioniert mit der Verwendung von Jasmin statt Mokka zu tun hat, aber ich habe es mit diesen Einstellungen arbeiten.

Benötigte Pakete: abgesehen von den offensichtlichen (Reaktion, Karma, Jasmin, 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 

erstellen .babelrc Datei in Ihrem Root-Verzeichnis. Ich war sehr verwirrt, wo in den Werkzeugen babel Optionen zu setzen, aber die meisten (und diese) babel Tools wird Look für eine .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

Mit Karma, ich denke, es ist etwas wie folgt aussehen würde (?):

// 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"] } ] 
       ] 
      }, 

siehe folgenden Link: Find a good way to get a coverage report with karma?