babel + remap-istanbul を使って、ES2015 のコードのカバレッジを計測する

表参道.rb #12【一周年】 で話したネタ。

全然アップデートできていない clairvoyance をちゃんと更新しようと、やる気を高める為に ES2015 で書けるように直した。

資料

やったこと

gulp + babel の環境構築

これは Web 上に資料がいくらでも転がっているので、楽。

clairvoyance
├ lib/
└ test/
  • gulp + babel の構築後
clairvoyance
  ├ lib/   # gulp build で src/lib から生成
  ├ test/  # gulp build で src/test から生成
  └ src/   # ES2015 のソースコード
    ├ lib/
    └ test/

こんな感じになるように環境作った。

ESLint (airbnb) の導入

ES2015 初心者なので、 ESLint を導入して、 airbnb の style に準拠して書くように設定した。
これも苦労せず、 web 上に資料がいくらでも転がっているので、普通に環境作れた。

あとは、 ESLint に指摘された箇所を 頑張って直す だけです。

カバレッジ計測

今まで使っていた istanbul だとカバレッジが計測できなくなったので、 remap-istanbul を使って直した。
これが一番苦労した。

# gulpfile.babel.js
gulp.task('build', ['clean'], () =>
  gulp.src('src/lib/**/*.js')
    .pipe(sourcemaps.init())
    .pipe(babel())
    .pipe(sourcemaps.write('../maps', {
        includeContent: false, sourceRoot: '../src/lib'
      }))
    .pipe(gulp.dest('lib'))
);

gulp.task('remap-istanbul', ['test'], () =>
  gulp.src('coverage/coverage-final.json')
    .pipe(remapIstanbul({
      basePath: 'maps/',
      reports: {
        json: 'coverage/coverage.json',
        html: 'coverage/lcov-report',
        lcovonly: 'coverage/lcov.info',
      },
    }))
);

こんな感じで設定したら動いた。 Current Directory がよく分からんけど、色んなパターンで設定を試したところ、これで動いた。

備考

ブログ書いていたときに見つけたけど、 babel 向けのカバレッジツールもあるみたい。

github.com

codecov とか使えるか検証してないけど、もしかしたら remap-istanbul を使うより楽かも。

最後に

あまり参考になりそうにないブログだけど、 babel + remap-istanbul を使う人の参考に何かなれば幸いです。
詳しく設定内容などを知りたい人は GitHubリポジトリを見てください。

github.com