Vue.js componentでvue-router,vue-resourceを利用したメソッドのUnitTestを書く方法

November 26, 2016

始めに

最近vue-resource・vue-routerを使ったSPAウェブサービスを開発・運用しており、ふとそろそろUnit Testを書いてみたいな〜と思い、ググってみたのですが思っていた以上に情報が見つからず・・・。ネット上で見つけたのは下記の３つのみ。

公式サイトを見ながら見よう見まねで書いてみたが、ハマりにハマってしまいもう無理だーとVue.jsコミュニティの方々に助けを求めました。皆さんから多数の提案を頂き、無事に解決しました。本当にありがとうございます！

今回はVue.jsコミュニティの方々に教えて頂いた、Vue.js componentのUnitTestを書く方法をまとめます。

前提

下記ライブラリを使用します。

Vue.js 2.0 + vue-resource + vue-router + vueify
karma
mocha
chai

テストケース３パターン

普通のコンポーネントメソッド
vue-routerのパラメーターを利用したメソッドのテスト
vue-resourceでAPI呼び出しをしているメソッドのテスト

テストについて

Vue.jsの
.vueのコンポーネントを対象とし、

methods内のメソッドをテストします。

一部省略していますが、

こちらにサンプルコードが置いてありますのでこちらをご覧ください。

パターン１：普通のコンポーネントメソッド

まずは外部ライブラリ、リソースを全く利用しない一番シンプルな例です。下記のような addという足し算メソッドがあったとします。

export default { methods: { add(a, b) { return a + b; } } }

上記のメソッドのテストをする場合は以下のように記述します。ポイントは以下の通りです。

テスト対象のコンポーネントをimportします。（読み込み時にファイルパスは適度の調整してください。）
コンポーネント内のメソッドへはmethodsを通じて呼び出すことができます。これはVueの基本仕様通りメソッドはmethods内にあるからです。

import Test from ’../../../src/js/components/test.vue’;

describe(‘Testコンポーネント’, () => { it(‘足し算’, () => { expect(Test.methods.add(1, 2)).to.be.eql(3); }) });

また下記のようにすればメソッドの存在確認テストもできます。

import Test from ’../../../src/js/components/test.vue’;

describe(‘Testコンポーネント’, () => { it(‘足し算’, () => { expect(Test.methods.add).to.be.a(‘function’); }) });

ここまでは自分で出来ました。

パターン２：vue-routerのパラメーターを利用したメソッドのテスト

ここからは自分では解決できず、コミュニティの方の助言で解決しました。例えば下記のように vue-router のパラメーターを取得して文字列結合をするとします。

export default { methods: { myName() { return this.$route.params.name + ’ Taro’; } } }

上記のメソッドのテストをする場合は以下のように記述します。ポイントは以下の通りです。

Vue.extendでサブクラスを作成し、テストケースの中でインスタンス化します
またインスタンス化時に

beforeCreateでルーティングのパラメーターを設定することが出来、ルーティングされた体でテストを書くことが出来るようになります。

import Vue from ‘vue’; import _Test from ’../../../src/js/components/test.vue’;

const Test = Vue.extend(_Test);

describe(‘Testコンポーネント’, () => { it(‘vue-routerを利用した場合のテストケース’, function() { const vm = new Test({ beforeCreate() { this.$route = { params: { name: ‘Yamada’ } } } }); expect(vm.myName()).to.be.eql(‘Yamada Taro’) }); });

パターン３：vue-resourceでAPI呼び出しをしているメソッドのテスト

今回一番悩んだのがこのテストケースでした。APIを利用してJSONで値を取得し、success時にデータオブジェクトのprofileを変更したい場合です。API呼び出しには vue-resourceのグローバル関数 Vue.http.get を利用していました。メソッドの返り値はPromiseとなり、非同期処理のテストってどうやるのか・・・。

export default { data() { return { profile: {} } }, methods: { fetchProfile() { Vue.http.get(’http://localhost:8000/api/profile’).then((response) => { console.log(“success”); this.profile = response.json(); }, (response) => { console.log(“failure”); }); } } }

ゴールのイメージとしては外部リソースであるAPIを実行しないようにモック化し、テスト対象のメソッド内で置き換えをすることです。

今回は Vue.http.getとグローバル関数を呼ぶので、下記のように算出プロパティを利用して $Vueからテスト対象オブジェク自身を取得できるように調整します。

export default { data() { return { profile: {} } }, computed: { $Vue() { return Vue; } }, methods: { fetchProfile() { Vue.http.get(’http://localhost:8000/api/profile’).then((response) => { console.log(“success”); this.profile = response.json(); }, (response) => { console.log(“failure”); }); } } }

次にテストケースです。ポイントは以下の通りです。

まずテストケースの引数にdoneを指定します。

mochaの仕様でdone()の実行をもって非同期テストが終了したことをmochaに通知します。（通例的に doneと命名されるそうです）

Vue.http.getでAPIを実際に呼び出さないようにモック化。getメソッドでPromiseの成功時にjson()メソッドがprofileのオブジェクトを返すように設定します。sinon等のモックライブラリを使わず、今回は仮の値を返す方式でも問題ありません。そしてテストケース2と同じ方式でコンポーネントをインスタンス化し、今回のテストケース用に設定した

$Vueを通じて、Vueインスタンスのグローバル変数を上書きします。

最後にテスト対象のメソッドを実行します。今回は非同期のテストにつき、そのままではPromiseの成功処理に入らないので、setTimeoutで擬似的に非同期にします。setTimeout内のdone()の実行をもって非同期テストが終了したことをmochaに通知され、モックで指定した通り

Promise.resolveで成功処理に入りテストケースが通ります。

import Vue from ‘vue’; import _Test from ’../../../src/js/components/test.vue’;

const Test = Vue.extend(_Test);

describe(‘Testコンポーネント’, () => { // ステップ１：引数のdoneを指定
it(‘vue-resourceを利用した場合’, (done) => { let profile = { nickname : ‘hoge’ };

// ステップ２：Vue.http.getをモック化
const vm = new Test()
vm.$Vue.http = {
  get () {
    return Promise.resolve({
      json () { return profile }
    });
  }
}

// ステップ３：setTimeoutで非同期呼び出し
vm.fetchProfile();
setTimeout(() => {
  expect(vm.profile).to.be.eql(profile)
  
  // mochaの非同期用テスト仕様で、done()が実行されるまでテストは実行されない。
  done();
}, 0)

}); });

Special Thanks

今回はVue.jsコミュニティの下記の方々に１週間に渡って何度も助言頂きました。最後にはパッチまで準備して頂きありがとうございます！とても勉強になりました。

感想

普段からJavaScriptのテストコードを全く書いたことがなかったので、正直基本的な事から理解が出来ず苦労しました。ただVue.jsを通じてテストを書く機会が生まれて、この３パターンなら書けるようになりました。JavaScriptのテストコードコード楽しいですね〜。もっと書きたくなったぞー！

始めに

前提

テストケース ３パターン