Vue.js-CLIとMochaでtestを実行する

はじめに

Vue.jsのCLI版でのテストの仕方。MochaとChaiでの実行方法について。

初めてVue-CLIをやってみた人が、自前のテストを追加して「npm run test」するまでの手順を記載。

なお、ほぼVue.jsの公式サイトに書いてある通りの内容。「実際どうなの？」の動作例を見たい人向け（私は見たい）。

• Vue.js公式の「単体テスト」の解説ページ
  • 単体テスト — Vue.jss

実施の大雑把な流れ

1. Vue-CLIのプロジェクトを作成
   • Karma＋Mocha＋Chaiで構成
2. テンプレートのまま「npm run test」を実行
3. jsファイルの別モジュールを追加して、そちらの関数を呼ぶように「HelloWorld.vue」を変更
4. 追加したjsファイルに対するテストコードを追加
5. 「npm run test」を実行し、追加分についても問題なくテストコードが動作することを確認

動作確認環境

• Node.js : v8.11.3
• Vue.js : v2.9.6
• OS : Windows 7 / 10

TDDするためのUnitTest環境の構築手順

※CDN版でのVue.js利用からのCLIへの移行は、こちら の記事なども参照のこと。

Node.js環境にて、以下のコマンドを実行してVue-CLIを導入する。
なお、ここでは「ローカル」にインストールする。
（※「グローバル」にインストールしたい場合は「-g」をオプションを付けること）

npm install vue-cli

つづいて、以下のコマンドを実行して、vue-cliのスケルトン的なものを作成する。これは「プロジェクト」などと呼ばれる一式。プロジェクト名は、ここでは「tdd_karma」とする。
（※上述のvue-cliを「グローバル」にインストールした場合は「vue init webpack tdd_karmae」で実行する）

node_modules\.bin\vue init webpack tdd_karma

コマンドを実行すると、いくつかの質問を聞かれる。次のように答える。

• Project name?
  • 任意のプロジェクト名を入れる。ここでは「tdd_karma」とする。
• Project description?
  • デフォルトのままEnterを押す（ A Vue.js project )
• Author
  • 自分の名前を入れる（ 私の場合は、hoshimado ）
• Vue build (Use arrow keys)
  • 簡単＆軽量化のため、「runtime」を選ぶ
• Install vue-router?
  • 簡単のため、「No」を選ぶ
• Use ESLint to lint your code?
  • 好きな方（Yes/No）を選ぶ（私は、今回はNo）
• Set up unit tests?
  • ここで**「 Karma 」を選択**する(Karma+Mocha、になる)
• Setup e2e tests with Nightwatch?
  • 好きな方（Yes/No）を選ぶ。今回はUnitTestにフォーカスしたいので「No」推奨

フォルダ「tdd_karma」の中に、Vue-CLIのプロジェクト（vueトランスパイル用の環境）が作成される。

次のコマンドを実行して、ブラウザで次のURLを開いて、先ずは動作確認をする。

cd tdd_karmae
npm run dev

http://localhost:8080/

ブラウザにVue.jsのサンプルページが表示されることを確認したら、コマンドライン上で「Ctrl+C」キーを押す。これにより、一旦Vueが止まる。

テンプレートのまま、テストが走ることを確認

作成したプロジェクトには、次のようなテストのサンプルコードが既に含まれている。

.\test\unit\specs\HelloWorld.spec.js

import Vue from 'vue'
import HelloWorld from '@/components/HelloWorld'

describe('HelloWorld.vue', () => {
  it('should render correct contents', () => {
    const Constructor = Vue.extend(HelloWorld)
    const vm = new Constructor().$mount()
    expect(vm.$el.querySelector('.hello h1').textContent)
      .to.equal('Welcome to Your Vue.js App')
  })
})

これは、「.\src\componets\HelloWord.vue」に対して、「Vueのエントリ内のhelloクラスが指定されたノードの子ノードのh1タグに表示されているテキストが Welcome to Your Vue.js App であること」を検証するテスト。

実行するには、次のコマンドを実行する。

npm run test

テストの実行結果は次のようになる。
なお、カバレッジの算出も最初から組み込み済みとなっている。

任意のテストを追加

先ず、次のように外部ファイルの処理を呼ぶように追加実装（？）したとしよう。

HelloWorld.vue

<script>
var dataStrage = require("./dataStorage").dataStorage;

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: dataStrage.feach()
    }
  }
}
</script>

dataStorage.js

var dataStorage = {
    "feach" : function () {
        return "Welcome to Your Vue.js App"
    }
};

export { dataStorage };

テストコードとして次のファイルを、test\unit\specs配下に追加する。

import Vue from 'vue';
import { dataStorage } from '@/components/dataStorage';
import { assert, expect } from 'chai';

describe("dataStrage.js", () => {
    it("should render correct contents", () => {
        let resutl = dataStorage.feach()

        assert(true, "chai is useable.");
        expect( resutl ).to.be.equal("Welcome to Your Vue.js App");
    });
});

改めてテストのコマンドを実行する。

npm run test

追加分についても問題なく動作することを確認

なお、例えば追加コード側が「"Welcome"」のみ、などでテストが失敗する場合、
次のようなエラー表示となるが、これはあくまで「テストが失敗した」というだけ
なので、慌てない。

npm ERR! tdd_karma@1.0.0 test: `npm run unit`
npm ERR! Exit status 1

エラー表示の上の方を辿ると、どのテストがどのように失敗したのか、
いつものMochaの見慣れた表示があるので、安心すること。

参考サイトや本など

• Vue.js公式サイト　- Web
  • https://jp.vuejs.org/
• Babel6でMochaとChaiを使ったテストを書く - Web
  • https://qiita.com/yamadayuki/items/9885c9e126648cd8c5e3