如何让Karify,Babel和Coverage在Karma中一起工作？

Question

我越来越厌倦试图让节点库一起正常工作,但这是工作的一部分,所以这里就是这样.

我有一个用于浏览器的ES6应用程序.我的文件有一组单元测试,当我的应用程序是用ES5编写时,我正在调试.我使用Browserify处理导入/导出模块并捆绑我的发行版.这在浏览器中运行应用程序时工作正常.我可以成功浏览源文件和规范文件并运行测试,测试通过.我非常接近这个工作.

唯一的问题是报道.我最接近的是显示karma-browserify生成的文件的覆盖范围,每个文件看起来像这样:

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

并且所有文件的覆盖率显然为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在源文件上运行,将生成的链接文件提供给源地图生成器,然后源地图生成器将生成的内容输入到karma-coverage中.但是Browserify和处理覆盖范围之间的沟通有些失落.Isparta(在幕后使用istanbul)不知道browserify正在运行,我不知道它看到了什么.

如果有人有任何测试模块化ES6的经验,并且有正确的代码覆盖率,请告诉我我是否在正确的轨道上或者我是否应该尝试别的东西.

Answer 1

这是适合我的配置,请注意我使用的是browserify-istanbul而不是isparata.

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

上班很痛苦.

希望有所帮助