Vue.jsのUnitテストフレームワーク

Vue.jsで開発プロジェクトのUnitテストフレームワークを決めるために、2019年1月時点での状況を調査した。調査ではフレームワークの機能の違いではなく、実際の開発プロジェクトでの利用状況を中心に見ている。

結論

これまではMochaと様々なライブラリを組み合わせて使うのが主流であったが、セットアップの簡単さと実行効率の良さから、今後はJestに開発者が流れていくことが予想される。Vue.jsでは@vue/cli-plugin-unit-jestを使うと簡単にセットアップができる。

調査の詳細

Vue CLI

Vue CLIでは2つのプラグインが提供されている。

• vue/cli-plugin-unit-mocha
• @vue/cli-plugin-unit-jest

Mocha vs Jest

長く使われてきたMochaに対して、Facebookが開発するJestが台頭してきている。stachshareを参照すると、利用者は歴史が長い分Mochaの方が多いが、GitHubのスター数はJestが上回っている。

いくつかの企業においても、MochaからJestに乗り換える動きが出てきている。AirbnbとeBayの事例紹介記事を以下に要約した。

(1) Migrating from Mocha to Jest

• AirbnbでのMochaからJestへの移行について紹介されている。
• MochaとJestのAPIが類似しており、テストにもコーディング規約を設けていたため、テストコードをほとんど書き換える必要なく、メソッド名の変換コードを入れる程度の対応で移行できた。
• MochaではIstanbulを使いカバレッジを計算していたが、時間がかかるため独自に並列化する処理を実装していた。Jestでは並列化の仕組みが予め備わっているため、テスト実行の仕組みを単純化できた。
• Jestはラウンドロビン方式での並列化、プロセス間でのbabel変換キャッシュの共有により高速なテスト実行が可能となっている。Mocha（独自並列化あり）では開発環境で45分かかっていたテストがJestでは14.5分（ビルドサーバー上では12分 → 4.5分）に短縮できた。
• Jestは各テストファイルを独立して実行するため、他のテストのコンテキストの影響を受けず、不安定なテストが発生しにくい。また、意図せず他のテスト依存したテストを書いてしまっても原因を見つけるのが容易になる。
• Jest導入により開発体験も向上し、開発者からも前向きなフィードバックが寄せられた。

(2) Into the Great Unknown — Migrating from Mocha to Jest

• eBay（ベルリンオフィス）で開発するサービスのテストをMochaからJestへ移行した手順が紹介されている。
• 多くのライブラリを組み合わせる必要があったMochaに比べて、Jestはオールインワンでセットアップが簡単になった。
• jest-codemodsを使うことで、Mocha、chai等で書かれたコードをある程度自動変換できるが、以下の手作業が必要であった。
  • テストファイル名置換
  • Sass読み込み設定を追加
  • Jest ESLint pluginを追加（エディタでのLintエラー回避）
  • ChaiをJestで動かすための変換コードを追加（参考：Combining Chai and Jest matchers）

補足として、Redditでの議論でもJestを支持する投稿が多かった。一方でJestの不安視する理由としては、開発の中心がFacebookであることによる開発の継続性への心配が挙がっている。