Karma や QUnit なんて今どき使ってる人いなさそうだな。TypeScript で書いています。環境は Rails + Webpacker です。

やりたいこと

~~ユニットテストを Karma で動かす~~
~~ソースマップを付ける~~
失敗したテストコードを VS Code や Emacs でハイライト

Yasuhito Takamiya 2020/12/07に更新

ひとまず現状の Karma の設定 (karma.conf.js) を見直してみる:

const webpackConfig = require("./config/webpack/test.js")

module.exports = function (config) {
  config.set({
    webpack: webpackConfig,

    webpackMiddleware: {
      noInfo: true,
    },

    // files と exclude で参照されるルートパス
    basePath: ".",

    // テストに使うブラウザ
    browsers: ["ChromeHeadless"],

    // テストフレームワーク
    frameworks: ["qunit"],

    // ブラウザにロードするテストファイル (のパターン)
    files: ["app/javascript/test/**/*.ts"],

    // files から除外するファイル (のパターン)
    exclude: [],

    // 使うプリプロセッサのマップ
    preprocessors: {
      "app/javascript/test/**/*.ts": ["webpack"],
    },

    // テスト結果のリポーター
    reporters: ["progress"],

    // ファイルが変更したときに自動的にテストを実行するかどうか
    autoWatch: false,

    // CI 用。true だとテストを一度だけ実行する
    singleRun: true,
  })
}

よくわからないこと

Karma のドキュメント (https://karma-runner.github.io/5.2/config/configuration-file.html) に webpack や webpackMiddleware の項目がない。プラグインのドキュメントになるんだろうか?

Yasuhito Takamiya 2020/12/06に更新

karma で webpack を使うのはこのプラグインらしい。

わかったこと

karma.conf.js の webpack: には、webpack の設定を書く。なので "./config/webpack/test.js" をそのまま使っている。
webpackMiddleware: には webpack-dev-middleware の設定を書く、らしい。webpack-dev-middleware ってなに。

これかあ https://github.com/webpack/webpack-dev-middleware

Yasuhito Takamiya 2020/12/06

けっきょく、これ↓はコンパイル時にバンドルの情報とか余計なものを出さない、という設定らしい。出ている気がするけどあとで見てみる。

 // ...

  webpackMiddleware: {
     noInfo: true,
   },

  // ...

Yasuhito Takamiya 2020/12/07に更新

Webpacker に Karma を使ったテストのドキュメントが。でも書いてあること古そう。あと別にカバレッジを取りたいわけではないんだよな。

Yasuhito Takamiya 2020/12/07に更新

Karma で TypeScript の行番号を正しく表示するの、めちゃくちゃ大変そう。Webpacker の設定も再利用できなさそうだし。

Yasuhito Takamiya 2020/12/07

次の設定でソースマップまではできるようになった。ポイントはすべてのテストをまとめる test/index_test.js というファイルを作り、webpacker でインラインソースマップをつけること。こうするとテストのファイルごとの実行ができなくなる (常にすべて実行) だけど、ほかに簡単な方法がないから仕方がない。

karma.conf.js

var webpack = require('webpack');
const webpackConfig = require("./config/webpack/test.js")

module.exports = function (config) {
  config.set({
    webpack: webpackConfig,

    webpackMiddleware: {
      noInfo: true,
    },

    basePath: ".",

    browsers: ["ChromeHeadless"],

    frameworks: ["qunit"],

    files: ["app/javascript/test/index_test.js"],

    exclude: [],

    preprocessors: {
      "app/javascript/test/index_test.js": ["webpack", "sourcemap"],
    },

    reporters: ["progress"],

    autoWatch: false,

    singleRun: true,
  })
}

config/webpack/test.js

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')
const config = environment.toWebpackConfig();
config.devtool = 'inline-source-map'

module.exports = config

app/javascript/test/index_test.js

const testsContext = require.context('.', true, /\.ts$/);

testsContext.keys().forEach(testsContext);