プログラムの規模が大きくなるほど、必然とコードを書く量が増えたり複雑化しやすくなります。
そこで重要になってくるのがテストと言う概念です。

プログラミングを学習する際にはテストに触れる機会は少ないかもしれませんが、実際の開発ではプログラムが問題なく動作するかテストを行います。
今回は、テストの概念と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のインストール

Jestを利用するには、npmパッケージからのインストールが必要です。
まずjest-testというフォルダを作成し、yarn initコマンドでpackage.jsonを作成します。

$ mkdir jest-test
$ cd jest-test
$ yarn init -y

フォルダの作成ができたら、以下のコマンドでJestをインストールします。

$ yarn add --dev jest

package.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と表示されていれば問題ありません。
これでテストが実行されているのを確認できました。

まとめ

今回は、テストの概念とテストフレームワークJestの設定までを紹介しました。

今後は、かんたんなプログラムを作成して、Jestでテストを実行するとどのようになるのか取り上げていきます。
まずは、テストは何のためにするのか、JavaScriptにはどのようなテストフレームワークが存在するのか、また、Jestの触り部分の理解に役立てていただけたら幸いです。

合わせて読みたいテストシリーズ

第1回：テストフレームワーク -Jest（当記事）
第2回：テストコードの書き方
第3回：テスト駆動開発