您如何将伊斯坦布尔代码覆盖率与转译的 Typescript 一起使用?

问题描述

我整个上午都在阅读有关这方面的文章，试图正确设置我的环境.但由于某种原因，我没有得到它.我的设置-

I've been reading articles on this all morning trying to get my environment setup correctly. But for some reason I'm not getting it. My setup-

/app
    ... source (mixed js and ts)
/scripts
    ... copied source (js)
    typescripts.js // transpiled typescript with inline mapping

测试运行良好，并且 chrome 调试器中的映射调试被正确映射.但伊斯坦布尔将 typescripts.js 文件视为一个文件，而不是几十个其他文件的串联.

Tests run fine, and with the mapping debugging in the chrome debugger is mapped correctly. But Istanbul sees the typescripts.js file as one file instead of the concatenation of dozens of other files.

为了生成打字稿源，我使用 gulp-typescript.源码(不包括测试)被转译成前面提到的typescripts.js，测试被单独转译并复制到/scripts.

To generate the typescript source I'm using gulp-typescript. The source (excluding tests) are transpiled to the aforementioned typescripts.js, and the tests are transpiled individually and copied to /scripts.

  var ts = require('gulp-typescript');
  var sourcemaps = require('gulp-sourcemaps');
  var concat = require('gulp-concat');

  module.exports = function (gulp, config) {
     'use strict';

     // Runs dot ts files found in `www` through the typescript compiler and copies them as js 
     // files to the scripts directory

     gulp.task('typescript', ['typescript:tests'], function () {
        return gulp.src(config.paths.typescript) // [ './www/app/**/*.ts', '!./www/app/**/*.test.ts', '!./www/app/**/*.mock.ts' ]
           .pipe(sourcemaps.init())
           .pipe(ts(ts.createProject(config.paths.tsConfig))) // './tsconfig.json'
           .js
           .pipe(concat(config.sourcemaps.dest)) // typescripts.js
           .pipe(sourcemaps.write(config.sourcemaps)) // { includeContent: false, sourceRoot: '/app' } - i've also tried absolute local path
           .pipe(gulp.dest(config.paths.tmpScripts)); // ./www/scripts


     });

     gulp.task('typescript:tests', [], function() {
        return gulp.src(config.paths.typescriptTests) // [ './www/app/**/*.test.ts', './www/app/**/*.mock.ts' ]
           .pipe(ts(ts.createProject(config.paths.tsConfig))) // './tsconfig.json'
           .pipe(gulp.dest(config.paths.tmpScripts)); // ./www/scripts
     });
  };

生成的 typescripts.js 具有内联源映射.使用 sourcemap，十几个 ts 文件大小为 106kb.

The resulting typescripts.js has the inline sourcemap. With the sourcemap, the dozen or so ts files results in 106kb.

所以从这里开始测试和调试工作正常.

现在为了让伊斯坦布尔代码覆盖率正常工作，我安装了 karma-sourcemap-loader 并将其添加到预处理器中.

Now in an attempt to get Istanbul code coverage working properly i've installed karma-sourcemap-loader and added it to the preprocessors.

preprocessors: {
    'www/scripts/typescripts.js': ['sourcemap'],
    'www/scripts/**/*.js': ['coverage']
},

我认为这是我需要做的.但它没有显示源文件的代码覆盖率.我尝试了 C:/ 的绝对路径，但这也不起作用.我还尝试了 gulp-sourcemaps 中的不同选项，例如添加源(将文件推送到 160kb)，但也没有.

I'd think this is what I'd need to do. But it does not show code coverage on the source files. I tried the absolute path from C:/ but that didn't work either. I also tried the different options in gulp-sourcemaps like adding source (which pushed the file to 160kb) but no like either.

有人让这个工作吗?有什么想法我可能做错了吗?

Has anyone gotten this to work? Any ideas what I could be doing wrong?

推荐答案

TL;DR: 有一个工具:https://github.com/SitePen/remap-istanbul 描述为通过源地图重新映射伊斯坦布尔覆盖范围的工具

TL;DR: There is a tool: https://github.com/SitePen/remap-istanbul described as A tool for remapping Istanbul coverage via Source Maps

Sitepan 上的文章 对其进行了更详细的描述:

The article on Sitepan describes it in more detail:

Intern 以及其他 JavaScript 测试框架都使用了伊斯坦布尔用于他们的代码覆盖率分析.随着我们开始越来越多地采用TypeScript 用于我们自己的项目，我们继续努力获得清楚地了解我们的代码覆盖率，因为所有报告仅包括在内我们发出的代码的覆盖率.我们不得不尝试使用编译器在我们的脑海中试图找出我们缺少测试覆盖的地方.我们还喜欢围绕我们的覆盖范围设置指标，让我们跟踪我们是否正朝着正确的方向前进.

Intern as well as other JavaScript testing frameworks utilise Istanbul for their code coverage analysis. As we started to adopt more and more TypeScript for our own projects, we continued to struggle with getting a clear picture of our code coverage as all the reports only included the coverage of our emitted code. We had to try to use the compilers in our minds to try to figure out where we were missing test coverage. We also like to set metrics around our coverage to let us track if we are headed the right direction.

我们中的一些人开始探索我们如何能够完成将覆盖率报告映射回其起源并经过一段时间工作，我们创建了 remap-istanbul，一个允许伊斯坦布尔的包覆盖信息被映射回其源，当有源地图可用.虽然我们一直专注于 TypeScript，但它可以在任何对发射代码产生覆盖的地方使用，包括上面提到的工具！

A couple of us started exploring how we might be able to accomplish mapping the coverage report back to its origins and after a bit of work, we created remap-istanbul, a package that allows Istanbul coverage information to be mapped back to its source when there are Source Maps available. While we have been focused on TypeScript, it can be used wherever the coverage is being produced on emitted code, including the tools mentioned above!

如何通过 gulp 使用该工具:https://github.com/SitePen/remap-istanbul#gulp-plugin

How to use the tool with gulp: https://github.com/SitePen/remap-istanbul#gulp-plugin

这篇关于您如何将伊斯坦布尔代码覆盖率与转译的 Typescript 一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！