[WIP]Rails5.1(webpacker) + Vue.js + Karma + mocha + power-assertでJSテスト環境を構築してみた

Rails5.1(Webpacker使用)にフロントのユニットテスト環境を構築してみました。
自分自身の備忘録としてフロントのユニットテスト環境構築をメモっときます。
※Webpackerは導入済みとして話を進めていきます

Karmaでとりあえずテストを走らせるまで

Karamaのインストール

yarn add karma --dev
yarn global add karma-cli

karma.conf.jsの作成

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.
> app/javascript/packs/components/**/*.js
> app/javascript/packs/components/**/*.vue
> test/javascript/**/*_spec.js

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

必要なライブラリのインストール

yarn add mocha --dev
yarn add karma-mocha --dev
yarn add power-assert --dev
yarn add karma-mocha-reporter --dev
yarn add karma-webpack --dev

karma.conf.jsに設定を追加

karma.conf.js

module.exports = function(config) {
  config.set({
    basePath: '',

    // mochaのフレームワークを設定
    frameworks: ['mocha'],

    files: [
      'app/javascript/packs/components/**/*.js',
      // 'app/javascript/packs/components/**/*.vue', 一旦コメントアウトしておく
      'test/javascript/**/*_spec.js',
    ],

    exclude: [
    ],

    // ユニットテストの実行時の前処理を設定。ここではspecファイルをWebpackerの設定通りにトランスパイルさせるようにしている
    preprocessors: {
      'test/javascript/**/*_spec.js': ['webpack']
    },


    // テスト結果をみやすくさせるための設定
    reporters: ['mocha'],

    port: 9876,

    colors: true,


    // デバッグレベルを変更しておく
    logLevel: config.LOG_DEBUG,

    autoWatch: true,

    browsers: ['Chrome'],

    singleRun: false,

    concurrency: Infinity
  })
}

テスト対象のjsファイルとSpecファイルの作成

テスト対象ファイル

app/javascript/packs/components/test_sample/target.js

function add(a, b) {
    return a + b;
}

function subtract(a, b) {
    return a - b;
}

Specファイル

test/javascript/test_sample/test_spec.js

import assert from 'power-assert'

describe('test add func', () => {
    it('1 + 2 = 3', () => {
        assert(3 === add(1, 2));
    });
});

テストの実行

karma start

すると・・・

~~~~長いので省略~~~
  test add func
    ✔ 1 + 2 = 3

Finished in 0.011 secs / 0.001 secs @ 00:08:03 GMT+0900 (JST)

SUMMARY:
✔ 1 test completed

テスト成功!

Vueコンポーネントのテストをする

avoriazをインストール

Vue.jsのテストライブラリは様々ありますが、avoriazが良さそうなので、avoriazを使用します。

yarn add avoriaz --dev

参考にした記事

テスト環境を構築するにあたり大変参考になりました。
本当にありがとうございます。
http://qiita.com/howdy39/items/b9d704e7f84053924da3
http://qiita.com/kuy/items/6aaab9b80a3cc017c103
https://speakerdeck.com/hypermkt/vuekonponentofalseyunitutotesuto