使用 karma-jasmine 和 istanbul 的 Typescript 代码覆盖率

Posted 2023-03-16

【中文标题】使用 karma-jasmine 和 istanbul 的 Typescript 代码覆盖率

【英文标题】：Code Coverage for Typescript using karma-jasmine and istanbul

【发布时间】：2016-12-10 10:25:46

【问题描述】：

我正在尝试使用伊斯坦布尔在业力框架中获取我的打字稿代码的代码覆盖率 在 karma.conf 中包含 typescript 文件，并且通过 karma typescript-preprocessor 我们能够对 typescript 代码进行单元测试和代码覆盖，但代码覆盖率报告来自于转置的 javascript 代码

如何获得打字稿代码的覆盖率报告？

这是我的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')
    ]

  );
;

【问题讨论】：

您可以使用 remap-istanbul：github.com/SitePen/remap-istanbul

我还没有找到将 remap-istanbul 与 TypeScript 结合使用的好例子。

【参考方案1】：

我们正在为我们的项目使用 instanbul-remap，它工作得非常好。为了创建我们的覆盖率报告，我们运行以下 shell 脚本：

#!/bin/bash

PROJECT_PATH="$(dirname $0)/../"

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

我们的项目使用 nodeunit 作为测试工具，因为它是一个节点应用程序。但是，我希望类似的方法适用于业力。

【讨论】：

完美适用于 mocha 运行测试

【参考方案2】：

有karma-remap-istanbul 很好地集成了remap-istanbul 与业力。文档很容易解释，但有一件事 - 在控制台上有摘要，配置是 text: undefined（否则文本输出到文件）。

因此可以直接从 karma 获得覆盖率摘要，但是当 ts 源与 karma.config.js 在同一目录中不可用时 karma-remap-istanbul 仍然需要在配置方面进行更多开发才能生成完整的 html 报告。

【参考方案3】：

安装karma-typescript:

npm install karma-typescript --save-dev

把它放在你的 karma.conf.js 中：

frameworks: ["jasmine", "karma-typescript"],

files: [
     pattern: "src/**/*.ts" 
],

preprocessors: 
    "**/*.ts": ["karma-typescript"]
,

reporters: ["progress", "karma-typescript"],

browsers: ["Chrome"]

这将运行您的 Typescript 单元测试并生成如下所示的伊斯坦布尔 html 覆盖率：

要运行上面的例子，你需要安装几个包：

npm install @types/jasmine jasmine-core karma karma-chrome-launcher karma-cli karma-jasmine karma-typescript typescript

这是单元测试 vanilla Typescript 代码的完整配置，在这种情况下不需要 tsconfig.json。对于 Angular、React 等更复杂的设置，您可以在 examples folder 和 integration tests 中找到示例。