12
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

grunt-istanbulを使ってテストカバレッジを出力する

Posted at

JSのテストカバレッジの生成ツールとして、istanbulというのがあるけれど
それをGruntタスクに取り込むための方法。

具体的には、mochaを使って、grunt-istanbulを使えるようにする流れ。

例は https://github.com/hiroosak/grunt-istanbul-example に記載してます。

処理の流れ

カバレッジを出力するには

  1. アプリコードをカバレッジ用コードに変換する
  2. カバレッジ用のコードに対してテストを実行する
  3. カバレッジの結果を保存する
  4. カバレッジレポートを出力する

それぞれで、gruntの別タスクで処理が行われる。

  1. instrumentタスク
  2. mochaTest タスク
  3. storeCoverage タスク
  4. makeReport タスク

instrument タスク

カバレッジの生成タスクの名前は instrument

設定の仕方は以下のような感じ。

Gruntfile.js
  grunt.initConfig({
    // ...
    instrument: {
      files: 'app/**/*.js',
      options: {
        lazy: true,
        basePath: 'test/coverage/instrument/'
      }
    },
    // ...
  });

上ではコピー先とコピー元を決定している。
環境のディレクトリ構成を気にして設定する必要がある。

.
├── Gruntfile.js
├── app/                # ここ以下のファイルを変換して ↓
│   ├── routes/
│   └── views/
# 省略...
└── test/
    ├── coverage/
    │   ├── instrument
    │   │   └── app     # ここに持ってくる
    │   │        └── routes
    │   └── reports
    ├── require_helper.js
    └── router.test.js

mocha タスク

mochaタスクは通常の grunt-mocha-cli と同様。

ただし、カバレッジを取る場合は、test/coverage/instrument/app以下を読み込む。ただ、カバレッジを取りたくない時は app/以下のコードを利用したい。

なので、require_helper.jsを用意して、環境変数で読み込みのappを変更できるようにする。

test/require_helper.js
'use strict';

module.exports = function (path) {
  return require((process.env.APP_DIR_FOR_CODE_COVERAGE || '../app/') + path);
};

なので、test/router.test.jsapp/以下のrequireを行う場合に、require_helperをはさんで、読み込みをしている。

test/router.test.js
var requireHelper = require('./require_helper');
var router = requireHelper('routes/');

また、APP_DIR_FOR_CODE_COVERAGEGruntfile.js 内で grunt-envを使って設定を行う。

Gruntfile.js
    env: {
      coverage: {
        APP_DIR_FOR_CODE_COVERAGE: '../test/coverage/instrument/app/'
      }
    },

storeCoverage タスク

Gruntfile.js
    storeCoverage: {
      options: {
        dir: 'test/coverage/reports'
      }
    },

makeReport タスク

Gruntfile.js
    makeReport: {
      src: 'test/coverage/reports/**/*.json',
      options: {
        type: 'lcov',
        dir: 'test/coverage/reports',
        print: 'detail'
      }
    }

タスクの設定

必要なnpmのロードと、タスクの設定。

  // plugins
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-mocha-test');
  grunt.loadNpmTasks('grunt-istanbul');
  grunt.loadNpmTasks('grunt-env');

  // tasks
  grunt.registerTask('test', ['mochaTest']);
  grunt.registerTask('coverage', ['clean', 'instrument', 'env:coverage', 'mochaTest', 'storeCoverage', 'makeReport']);

grunt test なら mochaTest を実行する。

grunt convert なら カバレッジ出力を行うために必要な設定をしながら、mochaTest を実行すれば、以下のようにカバレッジの結果が表示される。

Screen Shot 0026-06-14 at 11.54.48 PM.png

まとめ

grunt-istanbulでカバレッジを取るためには、一度テストターゲットを変換する必要があるために、ディレクトリ構成に気をつかう必要がある。
さもなければ、grunt-contrib-copyを使って、instrumentの置き場所に、色々構成を入れなければいけなくなるので注意が必要。

また、すでにテストコードがあるものから使う場合に、テストコードに修正を加える必要がある可能性がある。

サンプルは hiroosak/grunt-istanbul-example に。

12
12
0

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
12
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?