インストール

以下のコマンドでnpmでインストールする。Karmaはテストファイル内でAPIを使いたいわけではないので、型定義ファイルは必要ない。またJS実行はChrome環境を利用しようと思うので、karma-chrome-lauhcher を利用する。

npm install karma --save-dev
npm install karma-chrome-launcher --save-dev

karma.conf.jsの雛形を作る。

その後セットアップ。コマンドを実行して適当に質問に答えるだけ。

$(npm bin)/karma init

Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> mocha

Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no

Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
>

What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
>

Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>

Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes


Config file generated at "/Users/shibayu36/development/src/github.com/shibayu36/typescript-project-sample/karma.conf.js".

今回はテストフレームワークにMochaを使いたいのでmochaを選択、またひとまずJSのテスト実行にはデフォルトのChrome環境を使うことにした。これでひとまずKarmaの設定ファイルであるkarma.conf.jsの雛形ができた。

テストファイルの場所を指定する

とりあえずkarma.conf.jsにテストファイルの場所を指定する。テストファイルはsrc/ts/test/以下に配置しようと思うので、filesという設定にそのように記述する。

    files: [
        'src/ts/test/**/*.ts'
    ],

テスト実行前にTypeScriptをコンパイルするようにする

preprocessorという仕組みを利用すればテスト実行前にTypeScriptをコンパイル出来る。preprocessorとbrowserifyとtsifyを使えば簡単にTypeScriptのコンパイル環境をKarmaに組み込める。

今回はkarma-browserify とtsifyを使う。

まず必要なモジュールをインストールする。browserifyやtsifyは入っている前提で。

npm install karma-browserify --save-dev
# peerDependenciesでwatchfyも必要って言われるので入れる
npm install watchify --save-dev

karma.conf.jsに設定を入れる。

• frameworksにbrowserifyを追加
• preprocessorsにbrowserifyを追加
• browserifyでTypeScriptをコンパイルするような設定を入れる

という三つを行うだけ。詳しくは https://www.npmjs.com/package/karma-browserify を参照。

    frameworks: ['browserify', 'mocha'],
    ...
    preprocessors: {
        'src/ts/**/*.ts': ['browserify']
    },
    ...
    browserify: {
        plugin: ['tsify'],
        extensions: ['.ts']
    }

ここまでのまとめ

最終的にkarma.conf.jsは以下のようになる。

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['browserify', 'mocha'],


    // list of files / patterns to load in the browser
    files: [
        'src/ts/test/**/*.ts'
    ],


    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
        'src/ts/**/*.ts': ['browserify']
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity,

    browserify: {
        plugin: ['tsify'],
        extensions: ['.ts']
    }
  })
}

ここまででKarmaとMochaを組み合わせ、テスト実行前にTypeScriptをコンパイルして、そのままテストを実行出来るようになった。あとはテストを書くだけである。

参考

• JSをbrowserifyでビルドし、ライセンスコメントを適切に残す - $shibayu36->blog;
• gulp + browserify + tsifyを利用してTypeScriptコンパイル環境を作る - $shibayu36->blog;
• typingsを使ってnpmモジュールをTypeScriptで利用する - $shibayu36->blog;
• https://github.com/shibayu36/typescript-project-sample/tree/967c9d74fd3d844127a4352f19a0cc31b7a0690d:title=サンプルコード
• https://mochajs.org/
• http://chaijs.com/
• https://karma-runner.github.io/0.13/index.html
• https://www.npmjs.com/package/karma-chrome-launcher
• https://www.npmjs.com/package/karma-browserify

【おまけ】今回関係するファイルのtree構造

.
├── karma.conf.js
├── package.json
├── src
│   └── ts
│       ├── app.ts
│       ├── module1.ts
│       ├── module2.ts
│       └── test
│           └── module1.ts
├── typings
│   ├── browser
│   │   └── ambient
│   │       ├── chai
│   │       │   └── index.d.ts
│   │       └── mocha
│   │           └── index.d.ts
│   └── browser.d.ts
└── typings.json