【2024年版】Jasmine vs Mocha vs Jest！JSテストフレームワークを徹底比較。
この記事では、「Jasmine」「Mocha」「Jest」という現在もっともポピュラーなJavaScriptテストフレームワークを徹底的に比較してみる。
テスト駆動開発といった開発手法の流行もありテストフレームワークには年々注目が高まっている。一方で日本語でまとまった有益な情報を配信しているページはまだ少ない。
この記事では、この3つのフレームワークを様々な角度から分析して、ユニットテストの導入、または変更を検討している企業に向けてアドバイスをしたい。
なお、著者はAngular・Reactのエンジニアであり、JasmineとJestをおもに業務で使用している。
テストフレームワークとは？
各フレームワークについて触れるまえに、どのようなテストがWebの世界ではおこなわれるか、またテストフレームワークの種類について確認したい。
テストの種類と内容
ソフトウェアの開発で行われるテストには自動テストと手動テスト（マニュアルテスト）がある。
素早いサイクルで開発をおこない、短い期間でアプリをリリースすることが求められるWebの世界では、手動で毎回テストをおこなうのは限界があるため、自動テストが重要視される。
自動テストには以下のような種類がある。
- 単体テスト
コンポーネントやサービスといった最小のコンポーネント単位でおこなうテスト。 - 結合テスト
複数コンポーネントを使用しておこなう動作検証。 - e2eテスト
ユーザがアプリを使用するのを模擬しておこなうテスト。
この記事で紹介するJasmine・Mocha・Jestは単体テスト・結合テスト向けのフレームワークである。
e2eテストのフレームワークとしてはCypressがもっとも人気だ。Cypressについて詳しく知りたい人は以下の記事を読んでほしい。
テストフレームワークの構成
テストフレームワークは以下のような複数のライブラリが組み合わさって動作しており、それぞれの部分で別のライブラリを使ったりすることも可能だ。
- テストランナー
テストをブラウザ（もしくはNode.js内で）で実行するためのライブラリ。 - テスティングライブラリ
おもにアプリのDOM操作をおこなうために必要となるライブラリ。 - モッキングライブラリ
テストで使用するデータやデータ通信を模擬するためのライブラリ。 - アサーションライブラリ
テストの実行結果の正誤を検証するためのライブラリ。
この記事で紹介するフレームワークもそれぞれに役割やカバーする範囲が異なるので注意が必要だ。
JSのテストフレームワーク
では、Jasmine・Mocha・Jestとよく供に使われるフレームワークを紹介したい。
Jasmine
JasmineはKarmaとともにAngularに標準で備わっているテストフレームワーク。
他のフレームワーク同様にシンプルな英語を基にした文法を用いており、直感的にアサーション（正誤チェック）を記述することができる。
2009年に誕生しており歴史の長いフレームワークでもある。またそれゆえにインターネット上の情報も充実している。
Karma
JasmineとともにAngular標準のテストランナー。
ChomeやFirefoxといった一般的なインターネットブラウザを使用してテストを実行する。
また、CLIインターフェイスを備えておりコマンドラインからテストを実行することができる。
Mocha
Mochaは歴史が長く広く普及しているテストフレームワーク。
MochaはJasmineやJestと異なり特定のフロントエンドフレームワークのために開発されたわけではなく、Node.jsのためのテストフレームワークとして使われることが多い。
テストはブラウザもしくはNode.js上で実行することができる。
Mochaはその他のライブラリと組み合わせて使う故にフレキシブルである反面、テストでは多くのディペンデンシーを取り込まなくてはならないことが多い。
Chai
Chaiはアサーションライブラリ。
アサーションをプラグインとして拡張することができる。
Jest
JestはFacebookにより開発されているテストフレームワークであり、現在もっとも人気の高いJSテストフレームワークである。
人気の理由は高速なテスト実行処理とスナップショット機能などの充実した機能にある。Jestはテストを実行する際にブラウザで無くNode.jsを使用するという点で大きな違いがある。
JestはReact向けに開発されたフレームワークであるが、AngularやVue.jsのアプリに使用することができる。ReactアプリでJestを使用する場合はデフォルトではReact Testing LibraryをDOM操作などのために使用する。
JestとJasmineは開発チームが同じでありテストに使用する関数の記述などについてはJasmineとJestの間で違いはほぼ無い。
Vitest
Vitestオフィシャルページ:: https://vitest.dev
VitestはVue.jsを開発したEvan You氏によるプロジェクトであり、Jestの機能を拡張するフレームワーク。
Jestを単体で使用する場合よりもテストの実行速度を速くすることができる。テストへの変更を自動で検知する「ウォッチモード」においてはその違いは特に大きい。
なお、Vitestは現在は開発中でありプロダクション環境にて使用することは推奨されていないが、今後、注目を浴びることは確実なので今のうちにチェックしておこう。
Enzyme
EnzymeはReactアプリのためのテストライブラリ。
React Testing Libraryの代わりに使用されることが多い。React Testing Libararyではユーザ操作を疑似的に再現するようにテストを記述するのに対し、EnzymeではコンポーネントのPropsやStateのチェックに主眼を置いたアプローチを取る。
Jasmine vs Mocha vs Jest
ではJasmineとMochaとJestを比較していこう。
人気の動向
過去5年間の各フレームワークの人気の動向をGoogleトレンドで見てみよう。
ここ数年でJestが大幅に人気を伸ばしているがよく分かるだろう。
選考する際のポイント
最後にテストフレームワークを選定するうえでのポイントを確認したい。
基本的にはAngularアプリならばJasmine、ReactアプリならばJestといった形で使用するフロントエンドフレームワークによってデフォルトのフレームワークを選択するのが一番無難だろう。
ただし、インテグレーションの部分で不安が無いならば人気の高いJestに乗り換えでもいいだろう。