vue-cliによるプロジェクトの作成
公式を参考に、vue-cliを使ってUnitTest検証用のプロジェクトを作ります。
vue init webpack utest
- webpackボイラープレートを使用した新しいプロジェクト
- utestプロジェクトの名前
サンプルなので、インタラクティブな質問項目については適当にエンターキーを押していき進みます。途中、Pick a test runnerという項目が出てきます。ここでどれにするか。。
Mochaはサードパーティのアサーション、モック、スパイツールを組み合わせてテストを実行するフレームワークです。一方、Jestはそれらがひとまとまりになったフルスタックのテストフレームワークと言えます。今回は簡単に始められそうなJestにしてみます。公式の日本語ドキュメントもあります。
本記事では言及しませんが、e2eテストはNightwatchにしておきました。
ディレクトリ構成
Jestのディレクトリ構成はこんな感じになっていました。
テストの実行
インストール直後の状態でテストを実行する前に、画面を確認してみましょう。
vue-cli · Generated "utest".
To get started:
cd utest
npm install
npm run dev
vue-cli実行後に表示される内容に従ってコマンドを実行します。
npm run devをするとおなじみの画面が出ます。
テスト内容の確認
初期状態で、次のテストコードが入っています。
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)
.toEqual('Welcome to Your Vue.js App');
});
});
日本語で要約するとこんな感じになります。
- HelloWorldコンポーネントに対してユニットテストを実行
- 「正しいコンテンツを描画する」という振る舞いを検証
-
vmにコンポーネントをマウントした状態のオブジェクトを格納 -
.hello h1要素に対して、テキストコンテンツがWelcome to Your Vue.js Appと等しいか検証
テストの実行
npm run unitでJestによる単体テストを実行すると、結果が出力されます。
先程のテストケースをパスしているのがわかります。
また、テストカバレッジのサマリも表示されています。
テストを失敗させてみる
テストコードのアサーションを少し書き換えて、テストを失敗させてみます。
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)
.toEqual('Welcome to Your Vue.js Appp'); // change the expected result.
});
});
想定通り失敗しました。
見やすい！
今回はとりあえず使い始められるところまで確認しました。
詳しくは次回以降に。