8

ノード ライブラリを適切に連携させることにうんざりしていますが、それも仕事の一部なので、ここで説明します。

ブラウザ用の ES6 アプリケーションがあります。アプリケーションが ES5 で作成されたときに作成したファイルの単体テストのセットがあります。Browserify を使用して、モジュールのインポート/エクスポートとディストリビューションのバンドルを処理しています。ブラウザでアプリケーションを実行すると、これは正常に機能します。ソース ファイルと仕様ファイルを正常に Browserify してテストを実行でき、テストはパスします。私はこれを機能させることに非常に近づいています。

唯一の問題はカバレッジです。最も近いのは、karma-browserify で生成されたファイルのカバレッジを示すことです。それぞれ次のようになります。

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

また、各ファイルは 1 行にすぎないため、カバレッジは明らかにすべてのファイルで 100% と表示されます。

これは私の 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 (バックグラウンドで istanbul を使用) は、browserify が実行されていることを認識していません。

モジュール化された ES6 を適切なコード カバレッジでテストした経験のある方がいらっしゃいましたら、私が正しい方向に進んでいるのか、それとも別の方法を試す必要があるのか​​をお知らせください。

4

3 に答える 3

5

これは私にとってうまくいった構成です。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
    });
};

仕事をするのは大変な苦痛でした。

それが役立つことを願っています

于 2016-01-22T14:30:28.607 に答える
2

方法: Karma + Babel + React + Browserify + Istanbul

私はそれを得たと思います。

そうでない場合は、gus+overflow@mythril.co に連絡してください。

前の回答が機能しないことがモカの代わりにジャスミンを使用することに関係しているかどうかはわかりませんが、これらの設定で機能するようになりました。

必要なパッケージ:明白なものを除いて (React、Karma、Jasmine、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 ファイルを作成します。ツール内のどこにbabelオプションを配置するかについて非常に混乱しましたが、ほとんどの（およびこれらの）babelツールは.babelrc

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

カルマ.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' }
      ]
    }
  });
};
于 2016-08-04T23:42:07.890 に答える
0

Karma を使用すると、次のようになると思います(?):

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

次のリンクを参照してください:カルマでカバレッジ レポートを取得する良い方法を見つけますか?

于 2016-08-16T11:44:35.447 に答える