Jestの使い方！「インストール方法」や「テスト方法」などを解説！

この記事ではJavaScriptのテストフレームワークである『Jest』について

• Jestとは
• Jestの使い方
  • Jestのインストール方法
  • JestでJavaScriptのプログラムをテストする方法

などを分かりやすく説明するように心掛けています。ご参考になれば幸いです。

Jestとは

JestはFacebookが開発しているJavaScriptのテストフレームワークです。

JestはNode.js上で実行されるため、高速にテストを実行することが可能です。そのため、複雑なテストでもスムーズにテストを実行することができ、開発効率を高めることができます。

また、Jestにはスナップショット機能やモック機能など多くの便利な機能があります。スナップショット機能により、UIの変更を検出することができ、モック機能により、特定の関数の動作を制御したり、外部依存関係を模擬したりすることが可能です。

これらの特徴から、Jestは現在JavaScriptでは最も人気のあるテストフレームワークとなっています。

Jestの使い方

ではこれから

• Jestのインストール方法
• JestでJavaScriptのプログラムをテストする方法

を順番に説明します。

Jestのインストール方法

Jestのインストールは以下の手順で行います。

ではこれから上記の手順について順番に説明します。

「Node.js」と「Node Package Manager」がインストールされているかを確認する

Jestをインストールするためには、「Node.js」と「Node Package Manager(Node.js標準のパッケージ管理ツール)」がインストールされている必要があります。

「PowerShell」または「コマンドプロンプト(cmd)」を起動し、以下の2つのコマンドを1つずつ実行します。

node -v
npm -v

これらのコマンドを実行して、バージョンが正しく表示されればOKです。

上記のコマンドの実行結果

参考に上記のコマンドの実行結果を下記に示します。

PS C:\Users\user01> node -v
v18.16.0
PS C:\Users\user01> npm -v
9.5.1

「package.json」ファイルを作成する

Node.jsがインストールされていることを確認したら、次に「package.json」ファイルを作成します。ここでは、パッケージ管理にnpm(node package manager)を使用して作成します。

カレントディレクトリ(現在作業しているディレクトリ)がプロジェクトのルートディレクトリであることを確認してください。その後、以下のコマンドを実行すると、「package.json」ファイルを作成することができます。

npm init -y

npm init -yコマンドを実行すると、以下に示すような「package.json」ファイルが作成されます(環境によって作成されるpackage.jsonは異なります)。

{
  "name": "jesttest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Jestをインストールする

次に、Jestをインストールします。以下のコマンドをプロジェクトのルートディレクトリで実行すると、Jestをインストールすることができます。

npm install --save-dev jest

上記のコマンドを実行すると、Jestが開発依存関係として「package.json」ファイルに追加されます。その結果、「package.json」ファイルは以下のように更新されます。

{
  "name": "jesttest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jest": "^29.5.0"
  }
}

devDependenciesにjestが追加されていることで、Jestが正しくインストールされていることが確認できます。

JestでJavaScriptのプログラムをテストする方法

では、次にJestを用いてJavaScriptのプログラムをテストしてみましょう。

テストする方法の手順を以下に示します。

ではこれから上記の手順について順番に説明します。

Jestでテストを行うファイルを作成する

「add.js」というファイルを作成し、テスト対象であるJavaScriptの関数を書きます。このファイルでは、単純な足し算を行うadd関数を記述しています

function add(a, b) {
    return a + b;
}

module.exports = add;

テストファイルを作成する

次に、作成したadd関数のテストコードを書きます。「add.test.js」というファイルを作成し、以下処理を記述します。

// テスト対象ファイルを読み込み
const add = require('./add');

// test関数を使用して単体テストを定義
test('adds 1 + 2 to equal 3', () => {
    expect(add(1, 2)).toBe(3);
});

最終的なディレクトリ構成は以下のようになります(プロジェクトのルートディレクトリの名前がjestTestの場合)。

jestTest                     
├─node_modules                         
├─add.js
├─add.test.js
├─package-lock.json
└─package.json

「npm test」コマンドでテストを実行できるように「package.json」ファイルを編集する

npm testコマンドでテストを実行できるように、「package.json」ファイルのscriptに「"test": "jest"」を追加します。

{
  "name": "jesttest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jest": "^29.5.0"
  }
}

「npm test」コマンドでテストを実行する

以下のコマンドをプロジェクトのルートディレクトリで実行すると、テストを実行することができます。

npm test

実行結果

PS C:\Users\user01\Desktop\jestTest> npm test

> jesttest@1.0.0 test
> jest

 PASS  ./add.test.js
  √ adds 1 + 2 to equal 3 (2 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.5 s, estimated 1 s
Ran all test suites.
PS C:\Users\user01\Desktop\jestTest> 

Jestを用いてテストを実行することができました。

本記事のまとめ

この記事ではJavaScriptのテストフレームワークである『Jest』について、以下の内容を説明しました。

• Jestとは
• Jestの使い方
  • Jestのインストール方法
  • JestでJavaScriptのプログラムをテストする方法

お読み頂きありがとうございました。