32

我们刚刚在 Typescript 中启动了一个项目，我们需要获取代码覆盖率数据。

我们现有的 JavaScript 项目使用 Grunt 中的 Instanbul 进行覆盖。我们不确定如何为 TypeScript 复制它。

是否有任何工具可以从 TypeScript 代码本身生成代码覆盖率？或者我们是否针对生成的 JavaScript 代码运行伊斯坦布尔（或类似）工具。

4

6 回答 6

22

在 TypeScript 团队中，我们只是在已编译的 JavaScript 上使用常规代码覆盖工具。我们发现这已经绰绰有余，因为通常对于代码覆盖率，您正在查看总覆盖率 %（没有显着变化）或在表达式级别进行深入研究（也没有显着变化）。

如果您找到了支持它的工具（我还不知道），理论上您可以使用编译器发出的源映射将覆盖数据映射回 TypeScript 代码。这可能不值得麻烦。

于 2013-06-10T16:25:59.823 回答
21

更新：2016 年 8 月

现在可以使用Istanbul v1（目前处于 alpha 阶段）和TypeScript Node对 TypeScript 源代码运行 Istanbul 。

以下假设您使用Mocha作为测试框架，并且所有测试代码都在标准test/目录下。

首先，安装必要的软件包：

npm install --save-dev mocha ts-node
npm install --save-dev --save-exact istanbul@1.1.0-alpha.1

然后在您的 中包含以下内容package.json：

"scripts": {
   "test": "istanbul cover -e .ts _mocha -- --compilers ts:ts-node/register"
}

而已。跑npm test，你会被覆盖。

有关测试文件与源代码保存在同一目录中的工作示例，请参阅我的Deep Map项目。这是 HTML 输出的示例：

深度地图覆盖

于 2016-06-19T15:10:10.373 回答
13

在这个问题最初发布两年后，现在remap-istanbul似乎很有希望。

您可以在 Sitepen 中阅读更多相关信息：TypeScript 和其他转译语言的代码覆盖率

正如他们在Github 项目中所写：

一个包，它提供了基于 JavaScript Source Maps v3 将伊斯坦布尔代码覆盖率信息重新映射到其原始源位置的能力。

当我阅读文档时，该项目会将您在伊斯坦布尔生成的覆盖范围作为基于源映射的转换的输入。这听起来像是一个额外的步骤，但我相信它会受益，这样您就可以摆脱覆盖率报告中那些转译的自动生成行。

我相信这正是您需要的。

于 2015-11-10T23:10:58.823 回答
7

你可以使用Chutzpah

使用 Chutzpah，您可以从命令行运行测试并将您的测试与 Visual Studio 测试资源管理器集成。

Chutzpah 允许您决定是否要从 .ts 文件、.js 文件、.html 文件或所有这些文件中运行测试。

当设置（在 Visual Studio/Tools/Options/Chutzpah 中）从 .ts 文件运行测试时，您将能够分析生成的 .js 文件的代码覆盖率，生成的 JavaScript 代码和 .ts 文件之间的链接生成它。

它使您的 TypeScript 代码覆盖率工作变得非常容易，即使 JavaScript 代码是真正的被测代码。

您可以从 Visual Studio/Tools/Extensions 和更新安装 Chutzpah。

您可以在此处找到有关使用 Chutzpah 的代码覆盖率的更多详细信息。

于 2013-06-11T11:17:18.447 回答
7

针对生成的 javascript 运行代码覆盖率。你甚至可以通过告诉伊斯坦布尔忽略打字稿写的那些讨厌的不可能调用的行来达到 100% 的覆盖率。

伊斯坦布尔尊重像 /* istanbul ignore next */ 这样的评论，所以我要做的是在我的 gulp 任务中运行字符串替换，将 istanbul 忽略评论注入到 TypeScript 编写的自动生成的包装器代码中。

这是 gulp 任务：

var gulp = require('gulp'),
    replace = require('gulp-replace'),
    ts = require('gulp-typescript'),

gulp.task('scripts', function () {
    //compile typescript into javascript
    gulp.src('src/**/*.ts')
        .pipe(ts({
            declarationFiles: false,
            removeComments: false
        }))

        //write comments to tell istanbul to ignore the code inside the iife parameters
        .js.pipe(replace(/(}\)\()(.*\|\|.*;)/g, '$1/* istanbul ignore next */$2'))

        //write comments to tell istanbul to ignore the extends code that typescript generates
        .pipe(replace(/(var __extends = \(this && this.__extends\))/g, '$1/* istanbul ignore next */'))

        //write all of the compiled javascript files to a build folder so we can use them for tests and coverage
        .pipe(gulp.dest('dist/src'))

        //...the rest of your build process
});

这是生成的代码。

var __extends = (this && this.__extends)/* istanbul ignore next */ || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
var animalApi;
(function (animalApi) {
    var dogs;
    (function (dogs) {
        var BlackLab = (function (_super) {
            __extends(BlackLab, _super);
            //class code...
        });
        dogs.BlackLab = BlackLab;
    })(/* istanbul ignore next */dogs = animalApi.dogs || (animalApi.dogs = {}));
})(/* istanbul ignore next */animalApi || (animalApi = {}));
于 2015-10-08T19:28:18.483 回答
2

我创建了示例，以使用业力覆盖率和业力打字稿处理器为打字稿文件生成代码覆盖率。

https://github.com/nitinbhatia-dev/karma-typescript-coverage

于 2015-03-24T14:33:01.957 回答