《超簡単》Vuexのstoreのテストコード(単体テスト)の書き方をVue.jsを使って解説

Vue.js

今回の単体テスト対象

今回なぜフロントエンドで単体テストを書くのかという点に関しては一切書きません。あくまでもVuexのStoreのテストコードの書き方を解説していきます。ではまず今回のテスト対象のStoreを紹介します。

storeの処理自体は非常に簡単で/questions/${questionId}/answersをGetで叩いて、レスポンスをstateに格納しているだけです。実際のプロジェクトでは複数のstoreを使う場面が殆どですので同じようにして、このanswer storeを index.js で読み込ませます。

VuexのStoreの単体テストの書き方

単体テストに必要なライブラリ

test-utils

vueで単体テストを書くために用意されたライブラリです。殆どの方がvue.jsで単体テストを書くとき使用してるのではないでしょうか?npmもしくはyarnでインストールしてください。

https://vue-test-utils.vuejs.org/

axios-mock-adapter

今回自分が実装した単体テストはエンドポイントのモックを作って、それを叩いてテストする方法です。そのエンドポイントのモックを作るために使うライブラリがこれです。インストール方法は省略します。

flush-promises

axiosでAPIを叩いて、その結果が正しくstateに注入されているのかというテストを書く場面があるとします。この場合非同期処理を挟んでいるので、GETする前のstateの状態をテストで参照してしまい、単体テストにこける場面が多々あります。flush-promisesを使うと非同期処理が終わってからstateの値が正しいかどうかのテストを行うということが実現可能になります。公式サイトにも使い方が載っています。

非同期動作のテスト | Vue Test Utils
Vue コンポーネントをテストするためのユーティリティ

他にもjestvue-jestなどをいれる必要があります。以下のリポジトリのpackage.jsonを参考にすれば最低限テストをできる状態にはなると思うのでこちらを参照してください。

eddyerburgh/vue-test-utils-vuex-example
Example repository testing vuex with vue-test-utils - eddyerburgh/vue-test-utils-vuex-example

実際に書いたstoreのテストコード

エンドポイントのモックを用意して、その結果を受け取ったときの挙動が正しいかどうかを確認するテストコードを書きました。

beforeEachJestが提供する関数でテストを行う前に処理を行うことができます。

Setup and Teardown · Jest
テストを書いている際にしばしば、テストを実行する前にいくつかのセットアップ作業をしたり、テストが終了した後にいくつかの仕上げ作業をしたい場合があります。 Jest はこれらを処理するヘルパー機能を提供します。

今回ですと、テストを実行する前にテスト用のstore、エンドポイントのモックを定義します。その後testの関数を実行します。expect でgettersの値を受け取り、 toEqual に予想されている返り値を設定します。これらの値が等しくない場合はテストに失敗します。answerMockData.ANSWERS_GET にはエンドポイントのレスポンスの値(今回は回答内容のオブジェクト)が格納されており、正しくstoreのcommitでstateに値を突っ込むことができていればテストに成功します。

vuexの単体テストを実行する方法

package.jsonのscriptsの部分を以下のように書き換えます。

npm run test とすることで単体テストを実行することができます。今回の方法ではVue CLIを使っているので、プロジェクトにない場合はインストールしてください。

Vue CLI
🛠️ Standard Tooling for Vue.js Development
筆者
筆者

駆け足ではございましたが、ざっとVuexのstoreの単体テストの書き方について説明しました。間違っている点があるかもしれないのでその点を踏まえた上で参考にしていただければと思います。

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

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

目の保温マッサージ

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

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

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

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

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

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

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

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