为在 phantomjs 中的 browserify 包上运行的 jasmine 测试生成伊斯坦布尔代码覆盖率报告（通过 grunt）

Posted 2023-02-19

【中文标题】为在 phantomjs 中的 browserify 包上运行的 jasmine 测试生成伊斯坦布尔代码覆盖率报告（通过 grunt）

【英文标题】：Generating istanbul code coverage reports for jasmine tests run (via grunt) on a browserify bundle in phantomjs

【发布时间】：2014-01-05 23:23:25

【问题描述】：

标题确实说明了一切。尽管在互联网上搜寻，我还没有找到解决这个问题的一个例子。

这里有一些未遂事件

https://github.com/amitayd/grunt-browserify-jasmine-node-example - grunt、browserify 和 jasmine https://github.com/gotwarlost/istanbul/issues/59#issuecomment-18799734 - browserify 和伊斯坦布尔

这是我正在进行的代码https://github.com/wheresrhys/on-guard/tree/browserify（注意它是“浏览器化”分支 - Gruntfile.js 有点乱，但很快就会整理出来）。我使用console.log 进行的初步调查表明，页面中正在以某种方式加载bundle.src.js，但是当测试运行（并通过！）时，bundle.src.js 中的代码没有运行，所以我感觉它可能是一个别名问题......虽然仅限于 phantomjs，因为当我在 chrome 中打开 specrunner 时，代码正在运行。

【问题讨论】：

这个你搞定了吗？它目前在 on-guard 项目中有效吗？

这个问题在这里问了3年都没有答案是什么意思...

【参考方案1】：

我使用grunt-browserify + browserify-istanbul + grunt-contrib-jasmine + grunt-template-jasmine-istanbul 作为解决方案。在使用browserify 构建源文件时，此解决方案还排除了第三方库。

先显示代码，我稍后再解释，

grunt.initConfig(
browserify: 
  // build specs using browserify
  specs: 
    src: ["spec/**/*Spec.js"],
    dest: "spec/build/specs.js",
    options: 
      debug: true
    
  ,
  // build source files using browserify and browserify-istanbul
  dev: 
    options: 
      debug: true,
      browserifyOptions: 
        standalone: 'abc'
      ,
      transform: [['browserify-istanbul', 
        ignore: ['**/node_modules/**'], // ignore third party libs
        defaultIgnore: true
      ]]
    ,
    src: ['abc.js'],
    dest: 'dist/abc.js'
  
,
connect: 
  server: 
    options: 
      port: 7000
    
  
,
// test using jasmine, generate coverage report using istanbul
jasmine: 
  coverage: 
    src: ['dist/abc.js'],
    options: 
      junit: 
            path: 'bin/junit'
        ,
      host: 'http://localhost:7000/',
      specs:  'spec/build/specs.js',
      keepRunner: true,
      summary: true,
      template: require('grunt-template-jasmine-istanbul'),
      templateOptions: 
        replace: false, // *** this option is very important
        coverage: 'bin/coverage/coverage.json',
        report: [
          
          type: 'html',
          options: 
            dir: 'spec/coverage/html'
          
        ]
      
    
        


  grunt.registerTask('specs', ['browserify:specs', 'browserify:dev', 'connect', 'jasmine']);

生成伊斯坦布尔覆盖率报告的步骤可以总结为三个：

仪器代码 运行测试 生成覆盖率报告

在我们的解决方案中，我们在第 1 步中使用 browerify-istanbul，在第 2 步和第 3 步中使用 grunt-contrib-jasmine 和 runt-template-jasmine-istanbul。

browserify-istanbul 将让您在 browserify 构建步骤中检测代码，这样我们可以轻松忽略第三方库。但是grunt-template-jasmine-istanbul 将再次检测代码。为避免这种情况，您可以在选项中将replace 设置为false。

参考：

Istanbul steps broswerify-istanbul grunt-contrib-jasmine grunt-template-jasmine-istanbul -- replace 选项