Javascript 如何将伊斯坦布尔代码覆盖率与transpiled Typescript结合使用？

我整个上午都在阅读有关这方面的文章，试图正确设置我的环境。但出于某种原因，我不明白。我的设置-

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

测试运行正常，chrome调试器中的映射调试正确映射。但是伊斯坦布尔将

typescripts.js

文件视为一个文件，而不是几十个其他文件的串联

要生成typescript源代码，我正在使用

gulptypescript

。源代码（不包括测试）被传输到前面提到的

typescripts.js

，测试被单独传输并复制到

/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

因此，从这里开始，测试和调试工作正常。

现在，为了使伊斯坦布尔代码覆盖率正常工作，我安装了

karma sourcemap loader

，并将其添加到预处理器中

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

我想这就是我需要做的。但是它没有显示源文件上的代码覆盖率。我从

C://

尝试了绝对路径，但也没有成功。我还在

gulp sourcemaps

中尝试了不同的选项，比如添加源代码（将文件压缩到160kb），但也没有

有人用过这个吗？你知道我做错了什么吗？

TL；DR：有一个工具：描述为通过源地图重新映射伊斯坦布尔覆盖范围的工具

OnSitePan对此进行了更详细的描述：

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

我们中的一些人开始探索我们如何才能实现这一目标 将覆盖率报告映射回其来源，并在一段时间后 工作，我们创建了重新映射伊斯坦布尔，一个包，允许伊斯坦布尔 存在时要映射回其源的覆盖率信息 源地图可用。虽然我们一直专注于TypeScript，但它 可用于对发出的代码产生覆盖的任何地方， 包括上面提到的工具

---

如何将该工具与gulp一起使用：

如果您想要伊斯坦布尔的源地图支持，可以使用1.0 alpha版本，因为当前版本不支持源地图。我在（请参阅）中使用

ts节点设置了它，并且正在映射源代码。它看起来很棒，而且让我的测试和代码覆盖率都在进程内以零透明运行也很不错。当然，您可以将伊斯坦布尔1.0与传输的JavaScript一起使用

对于您正在使用的浏览器实现，我必须查看更多您正在执行的代码，以了解这是否适合您，但请尝试
1.0.0-alpha.2
，看看会发生什么。
正如blakeembrey提到的那样。伊斯坦布尔1.x处理得很好

下面是一个纯npm脚本的例子，它使用Jasmine实现

看

package.json（相关内容）
输出
这是回购工程。我运行了repo，可以看到测试正在运行。也会生成Html视图。
提供的示例中没有一个适用于我的Node.JS项目（用TypeScript编写）。我想在Jasmine中运行单元测试，由伊斯坦布尔报道

我最终得到了它与以下工作

package.json:

{
  "scripts": {
    "lint": "tslint 'src/**/*.ts'",
    "remap": "./node_modules/.bin/remap-istanbul -i ./coverage/coverage-final.json -t html -o ./coverage && rimraf ./coverage/dist",
    "test": "npm run lint && rimraf dist coverage && tsc --project tsconfig-test.json && ./node_modules/.bin/istanbul cover ./node_modules/.bin/jasmine JASMINE_CONFIG_PATH=jasmine.json && npm run remap"
  },
  "devDependencies": {
    "@types/jasmine": "2.8.6",
    "@types/node": "9.6.6",
    "istanbul": "0.4.5",
    "jasmine": "3.1.0",
    "remap-istanbul": "0.11.1",
    "rimraf": "2.6.2",
    "tslint": "5.9.1",
    "typescript": "2.8.1"
  }
}

jasmine.json

{
  "spec_dir": "dist",
  "spec_files": [
    "**/*.spec.js"
  ],
  "stopSpecOnExpectationFailure": false,
  "random": false
}

{
  "compilerOptions": {
    "declaration": true,
    "lib": [
      "dom",
      "es6"
    ],
    "module": "commonjs",
    "noImplicitAny": true,
    "outDir": "dist",
    "sourceMap": true,
    "target": "es5"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

.伊斯坦布尔.yml

instrumentation:
  root: ./dist
  excludes: ['**/*.spec.js', '**/fixtures/*.js']
  include-all-sources: true
reporting:
  reports:
    - html
    - json
    - text-summary
  dir: ./coverage

tsconfig test.json

{
  "spec_dir": "dist",
  "spec_files": [
    "**/*.spec.js"
  ],
  "stopSpecOnExpectationFailure": false,
  "random": false
}

{
  "compilerOptions": {
    "declaration": true,
    "lib": [
      "dom",
      "es6"
    ],
    "module": "commonjs",
    "noImplicitAny": true,
    "outDir": "dist",
    "sourceMap": true,
    "target": "es5"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

链接存储库中的示例不起作用。它在参数列表之后抛出一个错误：
SyntaxError:missing）
@ShaunLuttin打开github问题？您使用的是哪个节点版本？@ShaunLuttin假设它可以工作（这个错误似乎是一个明显的问题）。你能打开一个github问题并提供更多详细信息吗？@ShaunLuttin，windows代码也适用于linux，因此我删除了你的注释，只需将代码更改为适用于windows/linux的版本。链接存储库中没有测试。如果你浏览repo而不是
master
，则在提交哈希中会有测试。如果您正在进行最新的测试，您可以查看。例如