《Vue.js》公式サイトを参考にテストコードの導入方法を解説

Vue.js

Vue.jsのテスト

使用するテストフレームワーク

vue-test-utilsと呼ばれるテストフレームワークを使用します。Vue.jsの公式サイトにて推奨されているものです。

vuejs/vue-test-utils
🔬 Utilities for testing Vue components. Contribute to vuejs/vue-test-utils development by creating an account on GitHub.

vue-test-utilsはコンポーネントを個々に分離してにマウントして、必要な入力をモックしたり、や出力をアサートしたりすることでテストを行います。

テストコードの概略を解説

テストコードの主要なメソッド

先ほど紹介したgithubに置かれているコードを使いながらテストコードについて解説していきます。まず下のコードがテストをする対象のコンポーネントのコードです。

このコンポーネントはボタンをクリックするとカウンターが1ずつ増えていくものです。次のコードがテストコードです。

まずmountメソッドによってマウントされたcomponentはWrapper内に返されます。このWrapperはVueインスタンスを操作(mainpluating)、トラバース(travers)、クエリ(querying)したりするためのメソッドを公開しています。今回使ったメソッドは以下の4つ

html

string型のhtml要素を返す

contains

指定したhtml要素を返す

find

指定したDOM NodeまたはVueコンポーネントを返す

vm

Vueインスタンスを返す

この指定した要素に対して、出力条件を定義し、テストをしていきます。

Vueのテストを実行してみる

itに該当するテストの名前をつけることができます。以下のコードは<span class=”count”>0</span>が正しくレンダリングされたかどうかを確かめるコードです。

ではnpm testを叩いて上手くいくかどうかをテストしてみましょう。

renders the correct markupの部分にチェックが通ってテストが無事成功していることがわかります。では最後にあえてテストが失敗するようにテストコードを変更してみましょう。

実際のコードの初期値は0ですが、1に変更してテストを実行してみましょう。

renders the correct markupでテストがこけていることが確認できました。

Vue-test-unitsを導入する方法

では実際に自分のVueのプロジェクトで使っているテスト環境構築方法について紹介します。package.jsonに以下の記述を追加します。

次に.babelrcを追加します。

この状態でパッケージをインストールした後、npm run test を叩くとテストをすることができます。

筆者
筆者

Vue.jsの単体テストvue-test-utilsの概要解説は以上です。間違い等がございましたらご指摘していただければ幸いです。

参考サイト

Getting Started | Vue Test Utils
Utilities for testing Vue components

エンジニアにおすすめのアイテム

記事の内容とは別に、僕自身が保有する業務効率アップ、スキルアップを後押しするお勧めアイテムを紹介します。割とガチでお勧めなのです。

目の保温マッサージ

エンジニアの1日の業務は大半がディスプレイと睨めっこ。帰宅すると目が疲労で非常に重くなります。ひどい時は軽い頭痛になったりと結構深刻。そこで僕自身が毎日使っているのが目元マッサージ機です。

アイマッサージャー 二年間保証 最新グラフェン加熱技術 目元マッサージャー

アイマッサージャーを使ってから、翌日の疲労感がだいぶ軽減されました。またマッサージ自体とっても気持ち良くて、布団に入るのが毎日楽しみになりました。コスパまじで最強アイテムです。

座椅子をゲーミングチェア風に

ディスプレイの長時間利用と同時にエンジニアは座椅子の上に何時間も座る運命にあります。椅子が快適だと疲労度が大きく変わると思った私は以下の2点のアイテムを購入しました。

IKSTAR クッション 低反発 座布団 第五世代 オフィス IKSTAR クッション 低反発【メーカー直営・1年保証付】 ランバーサポート

気に入りすぎて、オフィス用だけではなく、自宅用も購入してしまいました。導入してから長時間座ることでのお尻の痛みや、腰の痛みが激減しました。なので体の健康を考えるなら、導入するべきアイテムですね。

タイトルとURLをコピーしました