使用 karma-jasmine 和 istanbul 的 Typescript 代码覆盖率
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33935523/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Code Coverage for Typescript using karma-jasmine and istanbul
提问by Udit S. Ahlawath
I am trying to get the Code Coverage for my typescript Code in karma framework using Istanbul in karma.conf typescript files are included and by karma typescript-preprocessor we able to do unit testing and code coverage of the typescript code but Code coverage report come for trans piled JavaScript code
我正在尝试使用 karma.conf 打字稿文件中的伊斯坦布尔获得我的打字稿代码的代码覆盖率，并且通过 karma 打字稿预处理器，我们能够对打字稿代码进行单元测试和代码覆盖率，但代码覆盖率报告来自转码 JavaScript 代码
How can I get the coverage report for typescript code?
如何获取打字稿代码的覆盖率报告？
Here is my karma.conffile.
这是我的karma.conf文件。
module.exports = function(config) {
config.set({
// base path, that will be used to resolve files and exclude
basePath: '',
// frameworks to use
frameworks: ['jasmine'],
preprocessors: {
'src/**/*.ts': ['typescript', 'coverage'],
'test/**/*.ts': ['typescript']
},
typescriptPreprocessor: {
options: {
sourceMap: false, // (optional) Generates corresponding .map file.
target: 'ES5', // (optional) Specify ECMAScript target version: 'ES3' (default), or 'ES5'
module: 'amd', // (optional) Specify module code generation: 'commonjs' or 'amd'
noImplicitAny: true, // (optional) Warn on expressions and declarations with an implied 'any' type.
noResolve: false, // (optional) Skip resolution and preprocessing.
removeComments: true, // (optional) Do not emit comments to output.
concatenateOutput: false // (optional) Concatenate and emit output to single file. By default true if module option is omited, otherwise false.
},
// extra typing definitions to pass to the compiler (globs allowed)
// transforming the filenames
transformPath: function (path) {
return path.replace(/\.ts$/, '.js');
}
//options: {
// sourceMap: true,
//}
},
// list of files / patterns to load in the browser
files: [
'src/**/*.ts',
'test/**/*.ts'
],
// list of files to exclude
exclude: [
],
// test results reporter to use
// possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
reporters: ['progress','coverage'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera (has to be installed with `npm install karma-opera-launcher`)
// - Safari (only Mac; has to be installed with `npm install karma-safari-launcher`)
// - PhantomJS
// - IE (only Windows; has to be installed with `npm install karma-ie-launcher`)
browsers: ['PhantomJS'],
// If browser does not capture in given timeout [ms], kill it
captureTimeout: 60000,
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: false,
plugins: [
'karma-jasmine',
'karma-chrome-launcher',
'karma-phantomjs-launcher',
'karma-typescript-preprocessor',
'karma-coverage'
//require('../../../node_modules/karma-typescript-preprocessor/index.js')
]
});
};回答by Erik Barke
Install karma-typescript:
npm install karma-typescript --save-dev
Put this in your karma.conf.js:
把它放在你的 karma.conf.js 中：
frameworks: ["jasmine", "karma-typescript"],
files: [
{ pattern: "src/**/*.ts" }
],
preprocessors: {
"**/*.ts": ["karma-typescript"]
},
reporters: ["progress", "karma-typescript"],
browsers: ["Chrome"]
This will run your Typescript unit tests on the fly and generate Istanbul html coverage that look like this:
这将动态运行您的 Typescript 单元测试并生成如下所示的伊斯坦布尔 html 覆盖率：
To run the above example you need to install a few packages:
要运行上面的示例，您需要安装一些软件包：
npm install @types/jasmine jasmine-core karma karma-chrome-launcher karma-cli karma-jasmine karma-typescript typescript
npm install @types/jasmine jasmine-core karma karma-chrome-launcher karma-cli karma-jasmine karma-typescript typescript
This is the complete configuration for unit testing vanilla Typescript code, no tsconfig.jsonneeded in this case. For more complex setups with Angular, React etc you can find examples in the examples folderand in the integration tests.
这是单元测试 vanilla Typescript 代码的完整配置，tsconfig.json在这种情况下不需要。对于 Angular、React 等更复杂的设置，您可以在examples folder和 中找到示例integration tests。
回答by Andrew Eisenberg
We are using instanbul-remap for our project and it works quite nicely. To create our coverage reports, we run the following shell script:
我们正在为我们的项目使用 instanbul-remap，它运行得非常好。为了创建我们的覆盖率报告，我们运行以下 shell 脚本：
#!/bin/bash
PROJECT_PATH="$(dirname ##代码##)/../"
cd $PROJECT_PATH
echo Creating coverage reports for `pwd`
if [ ! -d "target/dist" ]; then
echo
echo "target/dist directory not found. Must compile source with \`npm install\` before running tests."
echo
exit 1;
fi
COVERAGE_DIR=target/coverage-raw
REMAP_DIR=target/coverage-ts
mkdir -p $COVERAGE_DIR
mkdir -p $REMAP_DIR
# run coverage on unit tests only
echo Creating coverage reports for unit tests
node_modules/.bin/istanbul cover --dir $COVERAGE_DIR nodeunit `find target/dist/test/ -name *.test.js` > /dev/null
# re-map the coverage report so that typescript sources are shown
echo Remapping coverage reports for typescript
node_modules/.bin/remap-istanbul -i $COVERAGE_DIR/coverage.json -o $REMAP_DIR -t html
echo Coverage report located at $REMAP_DIR/index.html
Our project uses nodeunit as a test harness as it is a node application. However, I would expect that a similar approach would work for karma.
我们的项目使用 nodeunit 作为测试工具，因为它是一个节点应用程序。但是，我希望类似的方法适用于业力。
回答by ciekawy
There is karma-remap-istanbulwhich integrates nicely remap-istanbulwith karma. Documentation is pretty self explanatory but one thing - to have summary on the console the config is text: undefined(otherwise text output goes to the file).
有karma-remap-istanbul一个很好地remap-istanbul与业力结合在一起。文档是不言自明的，但有一件事 - 在控制台上有配置的摘要text: undefined（否则文本输出到文件中）。
So it is possible to have coverage summary directly from karma however when tssources are not available in the same directory as karma.config.jskarma-remap-istanbulstill needs some more development regarding configuration to be able to generate full html reports.
因此，可以直接从 karma 获得覆盖摘要，但是当ts源在同一目录中不可用时，karma.config.jskarma-remap-istanbul仍然需要更多关于配置的开发才能生成完整的 html 报告。
