LoginSignup
2

More than 5 years have passed since last update.

【karma】SourceMapから元ソースのカバレッジレポートを出力する

Posted at

webpack・babel等で生成したソースに対してkarmaでテストを回し、
source mapを元にして、元ソースベースにカバレッジレポートを出力する方法を書きます。

結論を言うとkarma-remap-istanbulを使います。
公式を読んで満足できればこちらの記事を読む必要はないです。

サンプルプロジェクトも作成したので参考にしてください。
https://github.com/ota-meshi/karma-remap-istanbul-sample

設定

※すでにkarmaでカバレッジレポートが出力できる状態からの差分で記載します。

karma-remap-istanbulのインストール

npmでインストールします。

npm install -D karma-remap-istanbul

karma.conf.js設定

下記を参考に必要箇所を追記、修正してください。

        //・・・

        files: [
            'dist/*.js',//テスト対象にbundleしたjsファイルを指定する
            //・・・
            //spec.jsを指定
        ],

        //・・・

        preprocessors: {
            'dist/*.js': ['coverage'],//bundleしたjsファイルをカバレッジの対象にする
        },

        //・・・

        //reportersに'karma-remap-istanbul'を追記
        reporters: ['coverage', 'karma-remap-istanbul'],

        //・・・

        //remapIstanbulReporterの設定を追記
        remapIstanbulReporter: {
            remapOptions: {}, //additional remap options
            reportOptions: {}, //additional report options
            //出力形式や、出力先を指定する
            reports: {
                lcovonly: 'coverage/remap/lcov/lcov.info',
                html: 'coverage/remap/html',
                cobertura: 'coverage/remap/cobertura/cobertura.xml'
            }
        },

        //・・・

webpack設定

SourceMap内で指定されるpathがwebpack://になってしまうと
カバレッジレポートファイルがうまく出力できないので変更します。

下記の記事を参考に、devtoolModuleFilenameTemplateを指定してくださ。
【webpack】source mapに指定されるdomainやpathを変更する

(webpack以外の設定方法や動作はわからないです。。。)

カバレッジ確認

karmaのテスト実行

bundleしてkarmaのテスト実行します

サンプルプロジェクトでは、以下のコマンドを実行します。

npm run build
npm run test

実行される中身は下のscriptsです

  "scripts": {
    "test": "karma start",
    "build": "webpack"
  },

レポート確認

サンプルプロジェクトでは、./coverage/remap以下に出力されるので確認しましょう。

image.png
image.png
image.png

ちなみにremap前のレポート

見ても何の参考にもならないカバレッジレポート

image.png

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2