karma(+webpack)+babel(es6)+power-assertで動かす

つまり、コード全体がes6で書かれていて、モジュール管理をwebpackで行っている場合に、ユニットテストでpower-assertをいい感じに使う方法です。ちなみにユニットテストはmochaです。

モジュールのバージョン

モジュール	バージョン
karma	0.13.15
webpack	1.12.9
babel	6.3.21
power-assert	1.2.0
babel-plugin-espower	2.0.0

結論

babel-plugin-espowerで行けます。

経過と問題

最初はkarmaのpreprocessorであるkarma-webpackとwebpack-espower-loaderを併用して行おうとしていました。

// karmaのプリプロセッサー設定(駄目な例)
{
  preprocessors: {
    "test/**/*.js": ["webpack", "espower"]
  }
}

// karmaのwebpack設定(駄目な例)
{
  webpack: {
    module: {
      loaders: [
        {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
      ]
    }
  }
}

これでも実行は出来るのですが、2つ問題がありました。

1. karmaのdebugでsourcemapが正しく反映されない
2. karmaのwatchモードが必ず失敗する(:ERROR [karma]: { [Error: no such file or directory]とかのエラー)

そのため、都度再起動するのが結構手間でした。

対策

公式リファレンスを読みましょう。
webpack-espower-loader#webpack-espower-loader-does-not-work-with-babel-loaderというFAQに以下のように説明されています。

webpack-espower-loader does not work with babel-loader due to the change of transpiled code since babel 5.0. Please use babel-plugin-espower with babel-loader.

まんまですね。

babel-plugin-espowerをインストールして、.babelrcかpackage.json(babelの設定を管理しているほう)に、以下のように記述します(この例はpackage.json)。

  "babel": {
    "presets": [
      "es2015"
    ],
    "plugins": [
      "babel-plugin-espower"
    ]
  },

karma側はwebpackのbabel-loaderに身をゆだねます。

// karmaのプリプロセッサー設定
{
  preprocessors: {
    "test/**/*.js": ["webpack"]
  }
}

これで快適にテストをする事が出来ます。
混ぜるな禁止ということで。