Vue.js-CLIとMochaでtestを実行する
はじめに
Vue.jsのCLI版でのテストの仕方。MochaとChaiでの実行方法について。
初めてVue-CLIをやってみた人が、自前のテストを追加して「npm run test
」するまでの手順を記載。
なお、ほぼVue.jsの公式サイトに書いてある通りの内容。「実際どうなの?」の動作例を見たい人向け(私は見たい)。
- Vue.js公式の「単体テスト」の解説ページ
実施の大雑把な流れ
- Vue-CLIのプロジェクトを作成
- Karma+Mocha+Chaiで構成
- テンプレートのまま「
npm run test
」を実行 - jsファイルの別モジュールを追加して、そちらの関数を呼ぶように「
HelloWorld.vue
」を変更 - 追加したjsファイルに対するテストコードを追加
- 「
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
テストの実行結果は次のようになる。
なお、カバレッジの算出も最初から組み込み済みとなっている。
任意のテストを追加
先ず、次のように外部ファイルの処理を呼ぶように追加実装(?)したとしよう。
<script>
var dataStrage = require("./dataStorage").dataStorage;
export default {
name: 'HelloWorld',
data () {
return {
msg: dataStrage.feach()
}
}
}
</script>
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の見慣れた表示があるので、安心すること。
参考サイトや本など
- Vue.js公式サイト - Web
- Babel6でMochaとChaiを使ったテストを書く - Web
Author And Source
この問題について(Vue.js-CLIとMochaでtestを実行する), 我々は、より多くの情報をここで見つけました https://qiita.com/hoshimado/items/abf813fc9457992fed86著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .