Question

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

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

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

要生成我使用gulp-typescript的打字稿来源。源（不包括测试）被转换为前面提到的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），但是也没有。

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

Answer 1

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

Sitepan上的article更详细地描述了它：

实习生以及其他JavaScript测试框架都使用伊斯坦布尔   用于代码覆盖率分析。随着我们开始采用越来越多   对于我们自己的项目，我们继续努力获取   我们的代码覆盖率清晰，只包括所有报告   我们发出的代码的覆盖范围。我们不得不尝试使用编译器   在我们的脑海中试图弄清楚我们在哪里缺少测试覆盖率。   我们还希望围绕我们的覆盖范围设置指标，让我们跟踪我们   朝着正确的方向前进。

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

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

Answer 2

如果您希望使用伊斯坦布尔的源地图支持，则可以使用1.0 alpha版本，因为当前版本不支持支持源地图。我在http://github.com/typings/typings中使用ts-node设置了它（请参阅https://github.com/typings/typings/blob/bff1abad91dabec1cd8a744e0dd3f54b613830b5/package.json#L19），并且正在映射源代码。它看起来很棒，很高兴让我的测试和代码覆盖都在进程中运行，零转换。当然，您可以将Istanbul 1.0与已编译的JavaScript一起使用。

对于您正在使用的浏览器实现，我必须看到更多您正在做的代码才能看到这只适用于您，但请尝试1.0.0-alpha.2并查看会发生什么。

Answer 3

正如blakeembrey所说。伊斯坦布尔1.x处理得很好。

下面是使用Jasmine执行此操作的纯npm脚本示例。

请参阅https://github.com/Izhaki/Typescript-Jasmine-Istanbul-Boilerplate。

package.json（相关内容）

{
  "scripts": {
    "postinstall": "typings install dt~jasmine --save --global",
    "test": "ts-node node_modules/.bin/jasmine JASMINE_CONFIG_PATH=jasmine.json",
    "test:coverage": "ts-node node_modules/istanbul/lib/cli.js cover -e .ts  -x \"*.d.ts\" -x \"*.spec.ts\" node_modules/jasmine/bin/jasmine.js -- JASMINE_CONFIG_PATH=jasmine.json"
  },
  "devDependencies": {
    "istanbul": "^1.1.0-alpha.1",
    "jasmine": "^2.4.1",
    "ts-node": "^0.9.3",
    "typescript": "^1.8.10",
    "typings": "^1.3.1"
  },
}

输出

Answer 4

这是回购作品。我运行了回购，可以看到测试正在运行。还生成了Html视图。 https://github.com/Izhaki/Typescript-Jasmine-Istanbul-Boilerplate

Answer 5

我提供的所有示例都没有适用于我的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
}

<强> .istanbul.yml

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

<强> tsconfig-test.json

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

您如何使用已编译的Typescript使用Istanbul Code Coverage？

5 个答案:

package.json（相关内容）

输出