f:id:shogonir:20170601003312p:plain

1. この記事の目的

karmaで実行するテストコードの中で、ローカルに置いたファイルを使う方法を紹介します。
公式ドキュメントのLoad Assetsの項目に詳しく書いてありますが、順を追って説明します。

サンプルとして、文字列の長さを返す関数をテストすることにして、ローカルに置いたテキストファイルをテストに使います。

2. テスト対象のコードを準備する

まずはyarnで依存ライブラリを導入します。

yarn add --dev \
    assert \
    karma \
    karma-chrome-launcher \
    karma-mocha \
    karma-webpack \
    mocha \
    webpack

次にテスト対象になる、文字列の長さを返す関数を src/sample.js に実装します。
webpackを使う前提なので export default を使っています。

export default function stringLength(str) {
  return str.length;
}

3. karmaの設定ファイルを準備

karma.conf.js を下記のように保存します。

module.exports = function(config) {
  config.set({
    frameworks: ['mocha'],
    browsers: ['Chrome'],
    concurrency: 1,
    singleRun: true,
    logLevel: config.LOG_INFO,
    
    plugins: [
      'karma-chrome-launcher',
      'karma-mocha',
      'karma-webpack'
    ],
    
    files: [
      './test/**/*.js',
      { pattern: 'test.txt', watched: false, included: false, served: true, nocache: false }
    ],
    preprocessors: {
      './test/**/*.js': ['webpack']
    },
    reporters: ['progress']
  });
};

今回重要なのは files の部分で定義されている、pattern: ‘test.txt’… の部分です。
このように記述することで、ルートにある test.txt はテスト対象ではないがkarmaサーバの配信対象になります。

4. テストコードでfetchする

先ほどの設定で出てきた test.txt を下記の通り保存します。

hello

次にテストコード test/sample.karma.js を下記の通り保存します。

import assert from 'assert';

import stringLength from '../src/sample';

describe('sample', function() {
  describe('searchText', function() {
    it('test', function(done) {
      var len = -1;
      fetch('../base/test.txt')
        .then(function(response) {
          response
            .text()
            .then(function(content) {
              len = stringLength(content);
            });
        });
      setTimeout(function() {
        assert.deepEqual(len, 6);
        done();
      }, 1900);
    });
  });
});

babelの導入を面倒臭がった結果、fetchの後の記述が大変なことになってしまいました。
ポイントを下記にまとめます。

fetchは非同期処理なので、itの第二引数の関数で引数をとっています
- こうすることで、done()を実行するまでテスト実行を待たせることができます
- ただし標準だと2000msでタイムアウトになるのでここでは1900ms待機にしました
ローカルファイルをfetchするときは /base をパスの先頭につける
- karma自体がサーバを立てて動作する前提なので、ファイルは/baseに退避されます

5. まとめ

正直大した内容ではないのですが、私はここで結構つまずいたので記事にしました。
みなさんもkarmaを使っていろんなテストを書けるといいなと思います。

shogonir blog

karmaでテスト実行中に、fetchでローカルファイルを取得する

目次

1. この記事の目的

2. テスト対象のコードを準備する

3. karmaの設定ファイルを準備

4. テストコードでfetchする

5. まとめ