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
以下に出力されるので確認しましょう。
ちなみにremap前のレポート
見ても何の参考にもならないカバレッジレポート