打字稿的代码覆盖率

时间:2013-06-10 15:03:07

标签: javascript code-coverage typescript

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

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

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

6 个答案:

答案 0 :(得分:21)

在TypeScript团队中,我们只在编译的JavaScript上使用常规代码覆盖工具。我们发现这已经足够了,因为通常对于代码覆盖率,您正在考虑总覆盖率%(不会发生显着变化)或者在表达级别深度潜水(这也没有显着变化)。

如果找到支持它的工具(我还不知道),理论上可以使用编译器发出的源映射将coverage数据映射回TypeScript代码。这可能不值得这么麻烦。

答案 1 :(得分:20)

更新: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输出的示例:

Deep Map coverage

答案 2 :(得分:12)

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

您可以在Sitepen中了解更多相关信息:Code Coverage for TypeScript and Other Transpiled Languages

他们写在Github project

  

提供重新映射Istanbul代码覆盖率的功能的程序包   基于JavaScript的信息到其原始源位置   Source Maps v3。

在阅读文档时,项目将根据源图将您的伊斯坦布尔生成的覆盖率作为转换输入。这听起来像是一个额外的步骤,但我相信它会受益,以便您可以在覆盖率报告中摆脱那些已转换的自动生成的行。

我相信这正是您所需要的。

答案 3 :(得分:8)

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

伊斯坦布尔尊重/ * istanbul忽略下一个* /的评论,所以我所做的是在我的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 = {}));

答案 4 :(得分:7)

您可以{/ 3}}使用

使用Chutzpah,您可以从命令行运行测试,并将测试与Visual Studio Test Explorer集成。

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

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

使用TypeScript代码覆盖率非常容易,即使JavaScript代码也是正在测试的真实代码。

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

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

答案 5 :(得分:2)

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

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