プログラムの規模が大きくなる程、必然とコードを書く量が増えたり、複雑化しやすくなります。
そこで重要になってくるのが「テスト」と言う概念です。
プログラミングを学習する際にはテストに触れる機会は少ないかもしれませんが、実際の開発ではプログラムが問題なく動作するかテストを行います。
今回は、テストの概念とJavaScriptのテストフレームワークであるJestについて紹介します。
テストとは
「テスト」とは、プログラムが問題なく動作するか、あるいは既に書かれたコードのパフォーマンスの改善がされているかなどを確認するための作業です。
一言で言えば、プログラムの品質を担保するためにテストを行います。
また、テストと言うと、一般的に「単体テスト（ユニットテスト）」を意味する場面が多いです。
単体テストとは、プログラムをモジュールごとに分け、モジュール単位で問題なく動作するかを確認するための作業のことを指します。
当記事でもテストを単体テストとして取り上げます。
はじめは順調にコードを書くことができても、コードを一箇所変更すると他の部分にも影響が出てしまうように、基本的には何度もコードを変更しながら開発を進めていきます。
そのような時に、書き直したコードがちゃんと機能するか、影響が出そうな他の部分も今まで通り動作するかチェックをしなければいけません。
しかし、これらすべてを手作業でチェックしようとすると、手間がかかる上に、ミスや見落としが発生しやすくなります。
こうした非効率な状況を減らすために、テストフレームワークを用いてテストを書いていきます。
テストフレームワーク
どのプログラミング言語にもテストを補助するためのフレームワークが存在しますが、その中でもJavaScriptは、テストフレームワークの選択肢が幅広く用意されている言語です。
あらかじめチェックを対象とするもののテストコードを書き、そのテストが通過したか、または落ちたのかテストフレームワークによって判断させます。
もしテストに通らないようであれば、コードを改善していくというような流れです。
近年人気があるテストフレームワークとして、MochaやJasmine、Jestが挙げられます。
ここでは、Reactの標準テストフレームワークとして導入されていて、サーバーサイドJavaScriptのテストフレームワークとしても人気のあるJestについて紹介します。
Jestとは
「Jest」は、Facebook社によって開発されたJavaScriptのテストフレームワークです。
Jestは、React, Vue, Angular, TypeScript, Reduxなどで幅広く利用されています。
Jestを使う最大のメリットは、JavaScriptのあらゆるフレームワークやライブラリに対応しているようにユニバーサルな点や、導入から初期設定が手軽に行える点です。
Jestの設定
ここからは実際にJestの設定を行なっていきます。
Jestの導入から動作確認までの流れを紹介します。
Jestのインストール
Jestを利用するには、npmパッケージからのインストールが必要です。
まず「jest-test」というフォルダを作成し、yarn initコマンドで「package.json」を作成します。
$ mkdir jest-test
$ cd jest-test
$ yarn init -yフォルダの作成ができたら、以下のコマンドでJestをインストールします。
$ yarn add --dev jestpackage.jsonの編集
つぎに、npmスクリプトからテストを呼び出せるようにします。
package.jsonに以下を追記します。
{
"scripts": {
"test": "jest"
}
}追記したあとのpackage.jsonはこのようになります。
{
...
"scripts": {
"test": "jest"
},
"devDependencies": {
"jest": "^27.3.1"
}
}テストの実行
さいごに、テストを実行してみましょう。
yarn testコマンドでテストが実行されます。
$ yarn test
No tests found
...今の段階ではテスト対象のファイルがないため、「No tests found」と表示されていれば問題ありません。
これでテストが実行されているのを確認できました。
まとめ
今回は、テストの概念の解説とJavaScriptのテストフレームワークであるJestの設定までを紹介しました。
今後は、かんたんなプログラムを作成して、Jestでテストを実行するとどのようになるのか取り上げていきます。
まずは、テストは何のためにするのか、JavaScriptにはどのようなテストフレームワークが存在するのか、また、Jestの触り部分の理解に役立てていただけたら幸いです。
JavaScript関連記事
