Karma + Browserify + Jasmine + 伊斯坦布尔 + React 覆盖

Posted 2023-02-19

【中文标题】Karma + Browserify + Jasmine + 伊斯坦布尔 + React 覆盖

【英文标题】：Karma + Browserify + Jasmine + Istanbul + React coverage

【发布时间】：2016-01-22 00:21:45

【问题描述】：

我正在尝试获取我的测试的覆盖率报告，但所有文件的覆盖率输出总是在一行中，显示文件路径的要求。比如……

但是测试运行良好。这是一个反应项目，所以我必须包含一些额外的文件路径和预处理器才能运行测试。

我不确定我的 karma 配置是否有问题？这就是我目前的配置...

/* global module */
module.exports = function (config) 
    'use strict';
    config.set(
        autoWatch: true,
        singleRun: true,

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

        files: [
            'node_modules/karma-babel-preprocessor/node_modules/babel-core/browser-polyfill.js',
            'node_modules/react/react.js',
            'src/**/*.jsx',
            'src/**/!(*spec).js'
        ],

        browsers: ['PhantomJS'],

        preprocessors: 
            'node_modules/react/react.js': ['browserify', 'sourcemap'],
            'src/**/*.jsx': ['browserify', 'sourcemap', 'coverage'],
            'src/**/!(*spec).js': ['browserify', 'sourcemap', 'coverage'],
        ,

        browserify: 
            debug: true,
            transform: [ 'babelify' ]
        ,

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

        coverageReporter: 
            instrumenters: isparta: require('isparta'),
            instrumenter: 
                'src/**/*.js': 'isparta',
                'src/**/*.jsx': 'isparta'

            ,
            reporters: [
                
                    type: 'text-summary',
                    subdir: normalizationBrowserName
                ,
                
                    type: 'lcov',
                    subdir: normalizationBrowserName
                ,
                
                    type: 'html',
                    dir: 'coverage/',
                    subdir: normalizationBrowserName
                
            ]
        

    );

    function normalizationBrowserName(browser) 
        return browser.toLowerCase().split(/[ /-]/)[0];
    

;

更新： 我也使用了 commonjs 转换，并且能够让事情更好地工作，但测试无法运行，并且覆盖范围是转换后的代码。

【参考方案1】：

确保包含您的所有源代码以进行覆盖。例如，我有以下 karma.conf.js：（检查预处理器部分）

// Karma configuration
// Generated on Mon Sep 07 2015 23:22:13 GMT-0400 (Eastern Daylight Time)

module.exports = function(config) 

    var SourceCode = [
        'app/app.js',
        'app/Modules/*.js',                     // Basic Path Files (Modules for Source, UnitTests to keep test files separate)
        'app/Modules/**/_*.init.js',            // Declarative functions needed for next line - Initialization Code
        'app/Modules/**/*.js',
        'app/UnitTests/**/*.mock.js',           // Mock Declarations for Tests
        'app/UnitTests/**/*.test.js'
    ];

    var Libraries = [
        'app/bower_components/angular/angular.js',
        'app/bower_components/angular-animate/angular-animate.js',
        'app/bower_components/angular-aria/angular-aria.js',
        'app/bower_components/angular-route/angular-route.js',
        'app/bower_components/firebase/firebase.js',
        ...
// Testing
        'app/bower_components/angular-mocks/angular-mocks.js',
        'app/bower_components/angular-material/angular-material-mocks.js',
        'app/bower_components/mockfirebase/browser/mockfirebase.js',
        'node_modules/sinon/pkg/sinon.js',
    ];

    config.set(
        // base path that will be used to resolve all patterns (eg. files, exclude)
        basePath: '',


        // frameworks to use
        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
        frameworks: ['mocha', 'chai'],      // 


        // list of files / patterns to load in the browser
        files: Libraries.concat(SourceCode),


        // list of files to exclude
        exclude: [
        ],


        // preprocess matching files before serving them to the browser
        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
        preprocessors: 
            'app/Modules/**/*.js': ['coverage']          // Ensure all files are in Code Coverage
        ,

        // test results reporter to use
        // possible values: 'dots', 'progress'
        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
        reporters: ['progress', 'coverage'],    

        coverageReporter: 
            type : 'html',
            dir : 'docs/coverage/'
        ,

        logLevel: 'LOG_DEBUG',

        // web server port
        port: 9876,


        // enable / disable colors in the output (reporters and logs)
        colors: true,


        // level of logging
        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
        logLevel: config.LOG_INFO,


        // enable / disable watching file and executing tests whenever any file changes
        autoWatch: false,


        // start these browsers
        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
        browsers: ['PhantomJS'],    // 'Chrome', 


        // Continuous Integration mode
        // if true, Karma captures browsers, runs the tests and exits
        singleRun: true
    )

【讨论】：

我的所有文件都包含在内。我认为这个问题与 browserify 有关。

不幸的是，我不使用 Browserify，但我在集成和测试方面也看到了更多问题。当我遇到问题时，我注意到很多关于 Browserify 的文章和问题，所以很遗憾你可能不得不继续搜索。抱歉，我无法提供更多帮助。