web-dev-qa-db-ja.com

karma-jasmineとistanbulを使用したTypeScriptのコードカバレッジ

Karma.confのイスタンブールを使用して、カルマフレームワークでTypeScriptコードのコードカバレッジを取得しようとしています。TypeScriptファイルが含まれており、カルマTypeScriptプリプロセッサにより、TypeScriptコードのユニットテストとコードカバレッジを実行できますが、コードカバレッジレポートは積み上げJavaScriptコード

TypeScriptコードのカバレッジレポートを取得するにはどうすればよいですか？

これが私の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')
    ]

  });
};
typescriptistanbulkarma-coverage
10
Udit S. Ahlawath

インストール 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 etcなどを使用したより複雑な設定の場合、例は examples folder および integration tests 。

13
Erik Barke

プロジェクトにはinstanbul-remapを使用しており、非常にうまく機能します。カバレッジレポートを作成するには、次のシェルスクリプトを実行します。

#!/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をテストハーネスとして使用します。しかし、私は同様のアプローチがカルマにも有効であることを期待します。

1
Andrew Eisenberg

karma-remap-istanbul はカルマとうまく統合されます remap-istanbul があります。ドキュメントはかなり自明ですが、1つのこと-コンソールに要約を表示するには、構成はtext: undefinedです（そうでない場合、テキスト出力はファイルに送られます）。

したがって、カルマから直接カバレッジサマリーを取得することは可能ですが、tsソースがkarma.config.jsと同じディレクトリにない場合でも、karma-remap-istanbulは、完全なhtmlレポートを生成できるようにするための設定に関する開発がさらに必要です。

1
ciekawy