とんかつ時々あんどーなつ

〜たとえ低空でも飛行していられるように〜

karma-coverage-istanbul-reporter から karma-coverage に移行してみた話

Angular Karma

この話があったので実際に移行してみた。

事前準備

  • v10 系でプロジェクトを作成
$ npx @angular/cli@10 new karma-reporter-update-sample --packageManager yarn
yarn test --no-watch --no-progress --code-coverage
yarn run v1.22.4
$ ng test --no-watch --no-progress --code-coverage
29 11 2020 10:14:01.133:INFO [karma-server]: Karma v5.0.9 server started at http://0.0.0.0:9876/
29 11 2020 10:14:01.135:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
29 11 2020 10:14:01.138:INFO [launcher]: Starting browser Chrome
29 11 2020 10:14:06.241:INFO [Chrome 86.0.4240.198 (Mac OS 10.15.7)]: Connected on socket 32VgUy8vEmsPmX1HAAAA with id 9909503
Chrome 86.0.4240.198 (Mac OS 10.15.7): Executed 3 of 3 SUCCESS (0.211 secs / 0.151 secs)
TOTAL: 3 SUCCESS
TOTAL: 3 SUCCESS
TOTAL: 3 SUCCESS

=============================== Coverage summary ===============================
Statements   : 100% ( 6/6 )
Branches     : 100% ( 0/0 )
Functions    : 100% ( 0/0 )
Lines        : 100% ( 5/5 )
================================================================================
✨  Done in 13.47s.

v11.x にアップデート

  • angular/cli と angular/core を v11.x にアップデートする
$ yarn ng update @angular/cli @angular/core

v11.x で単体テストを実施

'karma-coverage-istanbul-reporter' usage has been deprecated since version 11.
Please install 'karma-coverage' and update 'karma.conf.js.' For more info, see https://github.com/karma-runner/karma-coverage/blob/master/README.md
  • Angular CLI の v11.x では karma-coverage-istanbul-reporter は非推奨になっていて karma-coverage に移行する必要があるらしい
  • 実際に移行していく

karma-coverage-istanbul-reporter -> karma-coverage への以降

karma-coverage のインストール

  • 今回新しく必要になる karma-coverage をインストールする
$ yarn add karma-coverage -D

Reporter の置き換え

diff --git a/karma.conf.js b/karma.conf.js
index 82bbf2d..7b39405 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -9,16 +9,20 @@ module.exports = function (config) {
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
+      require('karma-coverage'),
       require('@angular-devkit/build-angular/plugins/karma')
     ],
     client: {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
-    coverageIstanbulReporter: {
+    coverageReporter: {
       dir: require('path').join(__dirname, './coverage/karma-reporter-update-sample'),
-      reports: ['html', 'lcovonly', 'text-summary'],
-      fixWebpackSourcePaths: true
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'lcovonly' },
+        { type: 'text-summary' },
+      ]
     },
     reporters: ['progress', 'kjhtml'],
     port: 9876,

diff --git a/karma.conf.js b/karma.conf.js
index 7b39405..83f37df 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -19,8 +19,8 @@ module.exports = function (config) {
       dir: require('path').join(__dirname, './coverage/karma-reporter-update-sample'),
       subdir: '.',
       reporters: [
-        { type: 'html' },
-        { type: 'lcovonly' },
+        { type: 'html', subdir: 'html' },
+        { type: 'lcovonly', subdir: 'lcovonly' },
         { type: 'text-summary' },
       ]
     },

karma-coverage-istanbul-reporter のアンインストール

  • いらなくなった karma-coverage-istanbul-reporter をアンインストールする
$ yarn remove karma-coverage-istanbul-reporter

まとめ

改めてまとめると大したことはしていないが Karma の config の書き方が変わるのでそこだけ注意が必要だと感じた。