Jest!JSテストフレームワークを徹底比較。Jest!JSテストフレームワークを徹底比較。Jest!JSテストフレームワークを徹底比較。自動テストこの記事では、「Jasmine」「Mocha」「Jest」という現在もっともポピュラーなJavaScriptテストフレームワークを徹底的に比較してみる。テスト駆動開発といった開発手法の流行もありテストフレームワークには年々注目が高まっている。一方で日本語でまとまった有益な情報を配信しているページはまだ少ない。この記事では、この3つのフレームワークを様々な角度から分析して、ユニットテストの導入、または変更を検討している企業に向けてアドバイスをしたい。著者はAngular・Reactのエンジニアであり、JasmineとJestをおもに業務で使用している。選考する際のポイントテストフレームワークとは?各フレームワークについて触れるまえに、どのようなテストがWebの世界ではおこなわれるか、またテストフレームワークの種類について確認したい。テストの種類と内容ソフトウェアの開発で行われるテストには自動テストと手動テスト(マニュアルテスト)がある。素早いサイクルで開発をおこない、短い期間でアプリをリリースすることが求められるWebの世界では、手動で毎回テストをおこなうのは限界があるため、自動テストが重要視される。自動テストには以下のような種類がある。単体テストコンポーネントやサービスといった最小のコンポーネント単位でおこなうテスト。結合テスト複数コンポーネントを使用しておこなう動作検証。e2eテストユーザがアプリを使用するのを模擬しておこなうテスト。この記事で紹介するJasmine・Mocha・Jestは単体テスト・結合テスト向けのフレームワークである。e2eテストのフレームワークとしてはCypressがもっとも人気だ。Cypressについて詳しく知りたい人は以下の記事を読んでほしい。関連記事Cypressでテストを自動化する!e2eツールの比較とテストの書き方。この記事では、e2eテストの特徴や目的について説明したうえで、Cypressを例にe2eテストの実装例を紹介したい。[...]テストフレームワークの構成テストフレームワークは以下のような複数のライブラリが組み合わさって動作しており、それぞれの部分で別のライブラリを使ったりすることも可能だ。テストランナーテストをブラウザ(もしくはNode.js内で)で実行するためのライブラリ。テスティングライブラリおもにアプリのDOM操作をおこなうために必要となるライブラリ。モッキングライブラリテストで使用するデータやデータ通信を模擬するためのライブラリ。アサーションライブラリテストの実行結果の正誤を検証するためのライブラリ。この記事で紹介するフレームワークもそれぞれに役割やカバーする範囲が異なるので注意が必要だ。JSのテストフレームワークでは、Jasmine・Mocha・Jestとよく供に使われるフレームワークを紹介したい。JasmineJasmineはKarmaとともにAngularに標準で備わっているテストフレームワーク。他のフレームワーク同様にシンプルな英語を基にした文法を用いており、直感的にアサーション(正誤チェック)を記述することができる。2009年に誕生しており歴史の長いフレームワークでもある。それゆえにインターネット上の情報も充実している。KarmaJasmineとともにAngular標準のテストランナー。ChomeやFirefoxといった一般的なインターネットブラウザを使用してテストを実行する。CLIインターフェイスを備えておりコマンドラインからテストを実行することができる。MochaMochaは歴史が長く広く普及しているテストフレームワーク。MochaはJasmineやJestと異なり特定のフロントエンドフレームワークのために開発されたわけではなく、Node.jsのためのテストフレームワークとして使われることが多い。テストはブラウザもしくはNode.js上で実行することができる。Mochaはその他のライブラリと組み合わせて使う故にフレキシブルである反面、テストでは多くのディペンデンシーを取り込まなくてはならないことが多い。ChaiChaiはアサーションライブラリ。アサーションをプラグインとして拡張することができる。JestJestはFacebookにより開発されているテストフレームワークであり、現在もっとも人気の高いJSテストフレームワークである。人気の理由は高速なテスト実行処理とスナップショット機能などの充実した機能にある。Jestはテストを実行する際にブラウザで無くNode.jsを使用するという点で大きな違いがある。JestはReact向けに開発されたフレームワークであるが、AngularやVue.jsのアプリに使用することができる。LibraryをDOM操作などのために使用する。JestとJasmineは開発チームが同じでありテストに使用する関数の記述などについてはJasmineとJestの間で違いはほぼ無い。You氏によるプロジェクトであり、Jestの機能を拡張するフレームワーク。Jestを単体で使用する場合よりもテストの実行速度を速くすることができる。テストへの変更を自動で検知する「ウォッチモード」においてはその違いは特に大きい。Vitestは現在は開発中でありプロダクション環境にて使用することは推奨されていないが、今後、注目を浴びることは確実なので今のうちにチェックしておこう。EnzymeEnzymeはReactアプリのためのテストライブラリ。Libraryの代わりに使用されることが多い。Libararyではユーザ操作を疑似的に再現するようにテストを記述するのに対し、EnzymeではコンポーネントのPropsやStateのチェックに主眼を置いたアプローチを取る。JestではJasmineとMochaとJestを比較していこう。過去5年間の各フレームワークの人気の動向をGoogleトレンドで見てみよう。ここ数年でJestが大幅に人気を伸ばしているがよく分かるだろう。選考する際のポイント最後にテストフレームワークを選定するうえでのポイントを確認したい。基本的にはAngularアプリならばJasmine、ReactアプリならばJestといった形で使用するフロントエンドフレームワークによってデフォルトのフレームワークを選択するのが一番無難だろう。インテグレーションの部分で不安が無いならば人気の高いJestに乗り換えでもいいだろう。執筆者:久野嘉樹ドイツ・ベルリン在住のフロントエンド・エンジニア。ドイツにてプログラマのための職業訓練プログラム(インターン2社を含む)を終了したのち、医療関係のソフトウェア会社にてフルスタック・エンジニアとして、様々な開発現場に参加する。現在はドイツの大手SIerにてシニアデベロッパーとして有名企業を顧客とする大規模開発に従事する。Java・TypeScriptをメインに業務管理ソフト・ウェブアプリケーションやAndroidアプリなどの開発経験を持つ。現在はSPA(シングルページアプリケーション)のスペシャリストとしてAngularをメインにフロントエンドの開発に携わる。2009年よりドイツに在住。ドイツ語能力はC1レベル。関連する記事マイクロフロントエンドとは?特徴やメリット、Webpackを使った実装例。2022.08.27Webアプリケーションの開発の世界では、毎年、新しいトレンドが生まれては、消えていったりしている。そんな中で最近よく耳にするようになったのが「マイクロ[...]JavaScriptの巻き上げ(hoisting)とは?JS開発者なら知っておきたい仕組み。2022.03.27この記事では、JavaScriptの特徴的な仕組みである巻き上げについて出来るだけシンプルに説明したい。巻き上げ(hoisting)はJavaScr[...]Cypressでテストを自動化する!e2eツールの比較とテストの書き方。2021.10.21この記事では、e2eテストの特徴や目的について説明したうえで、Cypressを例にe2eテストの実装例を紹介したい。【2023年】TypeScriptのおすすめ書籍5冊!レベル別に入門書からプロ向けまで紹介。2023.05.14【2023年】JavaScriptのおすすめ本7選!入門者・初心者向けにセレクト。2023.03.04HTMLテーブルで表をデザインする!セルの結合・枠線を付ける・レスポンシブ対応など。2023.01.21CSSグリッドレイアウトを極める!基本的な使い方とプロパティの一覧。2023.01.07【2023年】人気のヘッドレスCMSを徹底比較!Contentful・Strapi・Hygraphなど。JSフレームワーク徹底比較!JavaScript実践VSCodeでReactの開発を行う!React開発者のためのオススメ拡張機能。同一オリジンポリシーを理解する。APIコラム海外エンジニアエンジニア論PC。