Karma-Browserify + Karma-Coverage 的问题

Posted

技术标签:

【中文标题】Karma-Browserify + Karma-Coverage 的问题【英文标题】:Issue with Karma-Browserify + Karma-Coverage 【发布时间】:2018-01-27 14:23:57 【问题描述】:

我在让 karma-browserifykarma-coverage 合作时遇到问题。我花了很多时间试图找出问题所在,但没有找到解决方案。

这是我的 .js 文件(这些函数不做任何事情;它们只是用来测试代码覆盖率的模拟):

// src/js/utilities/form-validation.js

let includedInTest = () => true;

let alsoIncludedInTest = () => true;

let notIncludedInTest = () => true;

let alsoNotIncludedInTest = () => true;

export default 
  includedInTest,
  alsoIncludedInTest
;

这是我的测试文件:

// src/spec/utilities/form-validation.spec.js

import formUtilities from '../../js/utilities/form-validation';

describe('Form validation functions', function () 

  it('Should return "true"', function () 
    expect(formUtilities.includedInTest()).toBe(true);
  );

  it('Should return "true"', function () 
    expect(formUtilities.alsoIncludedInTest()).toBe(true);
  );

);

最后,这是我的 karma.conf:

module.exports = function(config) 
  config.set(
    basePath: '',
    frameworks: ['browserify', 'jasmine-jquery', 'jasmine'],
    files: [
      'bower_components/jquery/dist/jquery.js',
      'bower_components/jquery-validation/dist/jquery.validate.js',
      'src/js/**/*.js',
      'src/spec/**/*.spec.js'
    ],
    exclude: [
      'src/js/index.js'
    ],
    preprocessors: 
      'src/js/**/*.js': ['browserify', 'coverage'],
      'src/spec/**/*.spec.js': ['browserify']
    ,
    browserify: 
      debug: true,
      transform: [
        ['babelify',  presets: ['es2015'] ]
      ]
    ,
    reporters: ['mocha', 'coverage'],
    mochaReporter: 
      colors: 
        success: 'green',
        info: 'bgBlue',
        warning: 'cyan',
        error: 'bgRed'
      ,
      symbols: 
        success: '√',
        info: '#',
        warning: '!',
        error: 'x'
      
    ,
    coverageReporter: 
      instrumenters:  isparta: require('isparta') ,
      instrumenter: 
        'src/**/*.js': 'isparta'
      ,
      dir: 'coverage',
      subdir: '.',
      reporters: [
         type: 'html', dir: 'coverage' ,
         type: 'text-summary' 
      ],
      check: 
        global: 
          statements: 90,
          branches: 90,
          functions: 90,
          lines: 90
        ,
        each: 
          statements: 90,
          branches: 90,
          functions: 90,
          lines: 90
        
      ,
      watermarks: 
        statements: [50, 75],
        functions: [50, 75],
        branches: [50, 75],
        lines: [50, 75]
      
    ,
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['PhantomJS'],
    singleRun: false,
    concurrency: Infinity
  );
;

这个配置产生这个结果:

==== Coverage summary ====
Statements   : 100% ( 1/1 )
Branches     : 100% ( 2/2 )
Functions    : 100% ( 0/0 )
Lines        : 100% ( 1/1 )
=============

这显然是错误的,因为我在“form-validation.js”上有四个函数,我正在测试其中两个。但是根据总结报告,没有要测试的功能。

来自coverage/index.html 的这一行表明karma-coverage 只解析了一行:

我还在转换数组中尝试了“browserify-istanbul”(并从“coverageReport”中删除了仪器):

transform: [
  ['babelify',  presets: ['es2015'] ],
  'browserify-istanbul'
]

但这会产生错误:

18 08 2017 15:50:14.617:ERROR [karma]: TypeError: Cannot read property 'start' of undefined
    at /Users/gferraz/Sites/OAA-Refactor/node_modules/istanbul/lib/object-utils.js:59:44
    at Array.forEach (native)
    at Object.addDerivedInfoForFile (/Users/gferraz/Sites/OAA-Refactor/node_modules/istanbul/lib/object-utils.js:58:37)
    at Collector.fileCoverageFor (/Users/gferraz/Sites/OAA-Refactor/node_modules/istanbul/lib/collector.js:94:15)
    at /Users/gferraz/Sites/OAA-Refactor/node_modules/istanbul/lib/collector.js:108:30
    at Array.forEach (native)
    at Collector.getFinalCoverage (/Users/gferraz/Sites/OAA-Refactor/node_modules/istanbul/lib/collector.js:107:22)
    at checkCoverage (/Users/gferraz/Sites/OAA-Refactor/node_modules/karma-coverage/lib/reporter.js:148:33)
    at /Users/gferraz/Sites/OAA-Refactor/node_modules/karma-coverage/lib/reporter.js:257:32
    at Array.forEach (native)
    at Collection.forEach (/Users/gferraz/Sites/OAA-Refactor/node_modules/karma/lib/browser_collection.js:93:21)
    at /Users/gferraz/Sites/OAA-Refactor/node_modules/karma-coverage/lib/reporter.js:247:16
    at Array.forEach (native)
    at CoverageReporter.onRunComplete (/Users/gferraz/Sites/OAA-Refactor/node_modules/karma-coverage/lib/reporter.js:246:15)
    at Server.<anonymous> (/Users/gferraz/Sites/OAA-Refactor/node_modules/karma/lib/events.js:13:22)
    at emitTwo (events.js:111:20)

关于如何修复配置文件的任何建议?

【问题讨论】:

【参考方案1】:

这篇文章正确答案建议的配置帮助了我:Karma/Istanbul Code Coverage does not find functions and always returns 100%

现在我在 html 报告 ERROR [coverage]: TypeError: Cannot read property 'text' of undefined 上收到错误消息(意味着我要为报告生成的 html 文件未生成),这似乎与伊斯坦布尔有关。但是,我在终端窗口上得到了正确的代码覆盖率报告:

奇怪的是,每次测试运行时都不会发生错误,所以我有时能够很好地获取 html 文件。

这是解决我的问题所解决问题的karma.conf

module.exports = function(config) 
  config.set(
    basePath: '',
    frameworks: ['browserify', 'jasmine-jquery', 'jasmine'],
    files: [
      'bower_components/jquery/dist/jquery.js',
      'bower_components/jquery-validation/dist/jquery.validate.js',
      'src/js/**/*.js',
      'src/spec/**/*.spec.js'
    ],
    exclude: [
      'src/js/index.js'
    ],
    preprocessors: 
      'src/js/**/*.js': ['browserify'],
      'src/spec/**/*.spec.js': ['browserify']
    ,
    browserify: 
      debug: true,
      extensions: ['.js'],
      configure: (bundle) => 
        bundle.transform('babelify',  presets: ['es2015'] );
        bundle.transform(require('browserify-istanbul')(
          ignore: ['**/spec/**']
        ));
           
    ,
    reporters: ['mocha', 'coverage'],
    coverageReporter: 
      dir: 'coverage',
      subdir: '.',
      reporters: [
         type: 'html', dir: 'coverage' ,
         type: 'text-summary' 
      ],

      etc...
    
  );
;

【讨论】:

以上是关于Karma-Browserify + Karma-Coverage 的问题的主要内容,如果未能解决你的问题,请参考以下文章

Karma 没有在 Jenkins CI 中运行,找不到模块 'karma-jasmine'

Karma start和grunt karma之间的区别:单位

安装 Karma

.Karma+Jasmine+karma-coverage

Karma-Jasmine之安装与实例详解

IntelliJ中的Karma配置