Vue.jsのプロジェクトにJestを導入する

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をするとおなじみの画面が出ます。

テスト内容の確認

初期状態で、次のテストコードが入っています。

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による単体テストを実行すると、結果が出力されます。

先程のテストケースをパスしているのがわかります。
また、テストカバレッジのサマリも表示されています。

テストを失敗させてみる

テストコードのアサーションを少し書き換えて、テストを失敗させてみます。

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.
  });
});

想定通り失敗しました。
見やすい！

今回はとりあえず使い始められるところまで確認しました。
詳しくは次回以降に。