【Angular】Angular プロジェクトでよく見る Karma 関連ライブラリたち #angular-cli

karma

意外と知らない人もいるようだが、Karma 自体は既に非推奨という扱いになっている。

Karma is deprecated and is not accepting new features or general bug fixes.
The web testing space has evolved significantly in the 10+ years since Karma's creation. The web landscape looks very different today and new patterns and tools have emerged in the ecosystem. New test runners offer more performant alternatives, and Karma no longer provides clear unique value.

Based on the current state of the web testing ecosystem, we have made the hard decision to deprecate Karma.

We know Karma is used particularly commonly in the Angular ecosystem, so Angular is adding Jest and Web Test Runner support to provide a migration path off of Karma. See the Angular blog for more details.

Critical security issues in Karma will still be triaged and fixed as necessary. This will continue until 12 months after Angular CLI's Web Test Runner support is marked stable.

For those outside Angular looking to migrate off Karma, both Web Test Runner and jasmine-browser-runner provide browser-based unit testing solutions which can be used as a direct alternative. Jest and Vitest also provide Node-based alternatives.

これを機に Jest へ乗り換えた人もいるのではないやろか。
ただブラウザでのテストという意味では Web Test Runner を使うことになりそう。

まあそうは言いつつ、今も jasmine + Karma を使っているプロジェクトもあるので、この記事を書こうと思ったわけなんだけど、関連ライブラリがいっぱいあって、なんだかなって気持ちになったので、この場で整理、紹介しておきたい。

karma-chrome-launcher

karma-chrome-launcher はその中で、テストを実際の Chrome ブラウザ（またはそのヘッドレスバージョン）で実行する機能を提供している。

karma.conf.jsで、ヘッドレスで実行するかどうかを切り替えたりする設定でお馴染み。

karma.conf.js

module.exports = function(config) {
  config.set({
    frameworks: ['jasmine'],
    files: [
      'test/**/*.spec.js'
    ],
    customLaunchers: {
      ChromeHeadless: {
        base: 'Chrome',
        flags: ['--headless', '--disable-gpu', '--remote-debugging-port=9222']
      }
    },
    browsers: ['ChromeHeadless'],
    plugins: [
      'karma-jasmine',
      'karma-chrome-launcher'
    ]
  });
};

karma-coverage-istanbul-reporter

アプリケーションのコードカバレッジを測定し、レポートを生成するための Karma 用レポーター。Istanbul と nyc をバックエンドとして使用し、コードのどの部分がテストでカバーされているかを可視化することで、テストの網羅性を向上させる。

お馴染みの基本的な設定。

karma.conf.js

module.exports = function(config) {
  config.set({
    frameworks: ['jasmine'],
    files: [
      'src/**/*.js',
      'test/**/*.spec.js'
    ],
    preprocessors: {
      'src/**/*.js': ['coverage']
    },
    reporters: ['progress', 'coverage-istanbul'],
    coverageIstanbulReporter: {
      // 出力するレポートの形式
      reports: ['html', 'lcovonly', 'text-summary'],
      // 出力ディレクトリ
      dir: require('path').join(__dirname, 'coverage'),
      // ソースマップのサポートを有効にする
      fixWebpackSourcePaths: true
    },
    browsers: ['Chrome'],
    plugins: [
      'karma-jasmine',
      'karma-chrome-launcher',
      'karma-coverage',
      'karma-coverage-istanbul-reporter'
    ]
  });
};

また、テストに合格するための最小カバレッジ率を設定することが出来る。これにより、一定のカバレッジを維持し、テストの網羅性を確保出来る。

karma.conf.js

coverageIstanbulReporter: {
  reports: ['html', 'lcovonly', 'text-summary'],
  thresholds: {
    global: {
      statements: 80,
      branches: 80,
      functions: 80,
      lines: 80
    }
  }
}

karma-jasmine

文字通り、Karma と Jasmine を統合するためのアダプター。

karma-jasmine-html-reporter

Karma のテストランナーで Jasmine のテスト結果を HTML フォーマットで表示するためのレポーター。ブラウザでテスト結果を視覚的に確認するためのインタラクティブな UI を提供してくれる。テストの成功、失敗、スキップなどの情報が詳細に表示され、テストのデバッグや解析を容易にしてくれる。

以下のような画面でお馴染み。