找到一种获取 ES6 代码覆盖率报告的好方法

Posted 2023-03-16

【中文标题】找到一种获取 ES6 代码覆盖率报告的好方法

【英文标题】：Find a good way to get a coverage report on ES6 code

【发布时间】：2016-10-25 10:12:05

【问题描述】：

这是我的问题：在一个 AngularJS 项目中，我使用 Babel 6（ES2015 + stage3 + decorators）、SystemJS 和 Karma + Jasmine。

一切都好，除了代码覆盖率：我找不到一个好方法来获取 ES6 代码的覆盖率报告而不是转译的 ES5。

我有一些限制：

没有 Github npm 依赖项 没有弃用的项目（如 isparta） 应该在 Windows（是的，我知道，但我必须这样做）和 GNU/Linux 上运行

这个问题特别针对本地html覆盖率报告，但我还需要一种可以在SonarQube中使用的格式。

在这个问题上似乎有一个巨大的支持湖（尤其是装饰器和 SystemJS），所以，连同 Github 上的一些问题，也许 *** 社区可以分享一种方法来做到这一点。

如果你需要一些额外的东西，你可以在 Github (Sedona-Solutions/sdn-angularjs-seed) 上查看这个项目，并查看相关问题 (Sedona-Solutions/sdn-angularjs-seed#5) 以及我能找到的所有相关问题和项目的参考。

关于 remap-istanbul

这是我的转译和映射 gulp 任务：

gulp.task('es6', function () 
  return gulp.src(paths.source,  base: 'app' )
    .pipe(plumber())
    .pipe(changed(paths.output,  extension: '.js' ))
    .pipe(sourcemaps.init())
    .pipe(babel(compilerOptions))
    .pipe(ngAnnotate(
      sourceMap: true,
      gulpWarnings: false
    ))
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest(paths.output))
);

业力覆盖

coverageReporter: 
            reporters: [
                
                    type: 'json',
                    dir: 'target/coverage/',
                    subdir: '.',
                    file: 'coverage-final.json'
                
            ]
        

还有 test:remap gulp 任务：

gulp.task('test:remap', ['test'], function (done) 
    return gulp.src(paths.coverage + '/coverage-final.json')
        .pipe(remapIstanbul(
            reports: 
                'json': paths.coverage + '/coverage.json',
                'html': paths.coverage + '/html-remaped/'
            ,
            fail: true,
            useAbsolutePaths: true
        ));
);

由于the first remap-istanbul issue，我收到以下错误：

C:\...\sdn-angularjs-seed\node_modules\remap-istanbul\node_modules\istanbul\lib\report\html.js:288
                    text = structuredText[startLine].text;
                                                    ^

TypeError: Cannot read property 'text' of undefined
  at C:\...\sdn-angularjs-seed\node_modules\remap-istanbul\node_modules\istanbul\lib\report\html.js:288:53

可以看到对应的代码on github。

这可能是某些映射生成或路径的错误...如果您这么认为，请告诉我。

【参考方案1】：

karma-coverage + remap-istanbul 应该可以正常工作

【讨论】：

感谢您的回答。 Remap-istanbul 是我的第一个想法，但如果您查看问题中引用的 github 问题，问题SitePen/remap-istanbul/#1 阻止生成 html 报告。我尝试了以下脚本：remap-istanbul -i target/coverage/coverage-final.json -o target/coverage/remap/remap.json -b ./ && istanbul report --root target/coverage/remap --dir target/coverage/remap/rslt html，但最后没有任何文件（Windows 路径似乎有很多问题等等）。

自去年 9 月以来，我一直在成功使用 remap-istanbul。它生成 html 报告、lcov 和 Cobertura 报告。你可能做错了什么。我用咕噜声。这是我的配置： var remapIstanbulConfig = build: src: '.coverage/coverage.json', options: 报告: json: '.coverage/coverage.json', lcovonly: '.coverage/lcov.info' , html: '.coverage/html' , useAbsolutePaths: true ;

我在问题中为您添加了一些信息。如果您想了解更多详细信息，可以查看我的项目。相信我，我用 remap-istanbul 尝试了很多可能性，每次我都会收到这个错误......但这可能是由于地图或业力覆盖率报告不正确......或者 Windows 路径支持湖...... . 我会继续调查，但如果你有什么想法，我很乐意跟进。

我用我在项目中使用的相同设置设置了一个基本示例github.com/alexeibs/ts-example 它在 Windows 上运行

这是一个 Typescript 项目，但我想没关系