Nuxt.jsにおけるJest単体試験 環境構築〜Vuexでのユニットテスト実装

フロントエンドのユニットテストってどう書けば良いのか!?

そもそも過去関わった案件の多くが非モダン環境で、ネイティブJSとjQueryコードが混ざり合い、テストなんて書けないのが現実…そのためフロントエンドのテストに関する知見が皆無でした。

昨今はフロントエンドでもユニットテストを書ける環境が随分整備されているらしく、Nuxt.jsの参考書を読んでみるとFacebook製のJestによるユニットテストを推奨されている模様。

ちなみに本書では「どこまで書くか」を以下のように述べられています。

ユニットテストについてVuexデータストアと、挙動が複雑なVueコンポーネント、そしてフレームワークに依存しないレイヤのコードに絞ってテストを書くべき。

VueやReactではDOM操作から解放され、以前に比べればユニットテストが書きやすくなりましたが、改善されたといっても課題は残っており、いまだ正解は見えていないらしい。

なので今回はJest導入からVuex部分に限定してユニットテストを実装します。

Jest導入

Jestを動作させるために各種モジュールをインストール。

core-jsは最新(Ver3)を導入すると以下エラーが出力されるので断念(バグ!?)

調べてみると依存関係にバグがありcore-jsの依存関係が解消されなかった模様。

更にpackage.jsonに以下追記。

この設定でテスト実行が可能。

Vuexのサンプルコード

テスト対象のVuexコードは以下のとおり。

テスト観点としてgettersでは、mutationsを呼び出してstate更新後、値が取得出来る事を確認し、actionsではstateの値が正しく変更されていることを確認していきます。

Vuexのユニットテスト

プロジェクト直下にspec/store/index.spec.jsを新規作成。

ちなみにindex.js内ではaxios.getによるAPI操作を行なっており、通常時はnuxt.config.jsでモジュールを読み込んでいるので可能ですが、Jestでは利用出来ない模様。

そのため適当な値を返すモックを準備して、実行前にaxiosに注入すればモックを呼び出せます。

ちなみにindex.jsではasync+awaitを利用しているので、モックでも同様にして呼び出せばOK。