typescript 打字稿的代码覆盖率

Code Coverage for Typescript

提问by Gerard Condon

We've just started a project in Typescript and we need to get code coverage figures.

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

Our existing JavaScript projects use Instanbul in Grunt for coverage. We are unsure how to replicate this for TypeScript.

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

Are there any tools for generating code coverage from the TypeScript code itself? Or do we run the Istanbul (or similar) tool against the generated JavaScript code.

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

回答by Ryan Cavanaugh

On the TypeScript team, we just use regular code coverage tools on the compiled JavaScript. We've found this to be more than sufficient, since usually for code coverage you are looking at total coverage % (which doesn't change significantly) or are deep-diving at expression-level (which also doesn't change significantly).

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

If you found a tool that supported it (I'm not aware of any yet), you could in theory use the source maps emitted by the compiler to map the coverage data back to the TypeScript code. It's probably not worth the trouble.

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

回答by McMath

Update: August 2016

更新：2016 年 8 月

It is now possible to run Istanbul against TypeScript source code using Istanbul v1(currently in the alpha stage) along with TypeScript Node.

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

The following assumes that you are using Mochaas a test framework and that all test code is under the standard test/directory.

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

First, install the requisite packages:

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

npm install --save-dev mocha ts-node
npm install --save-dev --save-exact [email protected]

Then include something like the following in your package.json:

然后在您的package.json:

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

That's it. Run npm testand you'll be covered.

就是这样。跑npm test，你会被覆盖。

See my Deep Mapproject for a working example in which the test files are kept in the same directory as the source code. Here is a sample of the HTML output:

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

回答by Jesper R?nn-Jensen

Two years after this question originally was posted, there is now remap-istanbulwhich seems promising.

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

you can read more about it in Sitepen: Code Coverage for TypeScript and Other Transpiled Languages

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

As they write in the Github project:

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

A package that provides the ability to remap Istanbul code coverage information to its original source positions based on a JavaScript Source Maps v3.

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

As I read the documentation, the project will take your istanbul-generated coverage as input for conversion based on the sourcemap. This sounds like an additional step, but I am sure it will benefit so that you can get rid of those transpiled autogenerated lines in the coverage report.

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

I believe this is exactly what you will need.

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

回答by TwitchBronBron

Run code coverage against the generated javascript. You can even hit 100% coverage by telling Istanbul to ignore those pesky impossible-to-call lines that typescript writes.

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

Istanbul honors comments like /* istanbul ignore next */, so what I do is run a string replace in my gulp task that injects the istanbul ignore comments into the auto-generated wrapper code that TypeScript writes.

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

Here is the gulp task:

这是 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, '/* istanbul ignore next */'))

        //write comments to tell istanbul to ignore the extends code that typescript generates
        .pipe(replace(/(var __extends = \(this && this.__extends\))/g, '/* 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
});

Here is the generated code.

这是生成的代码。

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 = {}));

回答by jfoliveira

You can use Chutzpahfor that

您可以使用放肆为

With Chutzpah you can run your tests from command line and integrate your tests with Visual Studio Test Explorer.

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

Chutzpah allows you decide if you want to run the tests from .ts files, .js files, .html files or from all of them.

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

When set (in Visual Studio/Tools/Options/Chutzpah) to run tests from .ts files, you will be able to analyze code coverage of your generated .js files, with a link between the generated JavaScript code and the .ts file that generated it.

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

It makes really easy to work on your TypeScript code coverage, even being the JavaScript code the real code under test.

它使处理您的 TypeScript 代码覆盖率变得非常容易，即使是 JavaScript 代码也是被测试的真实代码。

You can install Chutzpah from Visual Studio/Tools/Extensions and updates.

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

You can find heremore details about code coverage using Chutzpah.

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

回答by Nitin

i have created sample to generate code coverage for typescript files using karma coverage and karma typescript processor.

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

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

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