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


はじめに

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

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

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

実施の大雑把な流れ

  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! [email protected] test: `npm run unit`
npm ERR! Exit status 1

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

参考サイトや本など