Jestでテストを書こう

このチュートリアルでは、テストフレームワーク「Jest」を使い、ユニットテストをTypeScriptで書くことを学びます。

本章で学べること

本章では、簡単な関数のテストをJestで書くことを目標に、次のことを学びます。

Jestを使ってTypeScriptの関数をテストする方法
Jestの導入方法
Jestでのテストの書き方
テストの実行方法
結果の見方

本章の目的はJestを完全に理解することではありません。むしろ、Jestがどういったものなのか、その雰囲気を実際に体験することに主眼を置いています。そのため、内容はかなり最低限のものとなりますが、逆に言えば少しの時間でJestを試してみれるシンプルな内容にまとまってますから、ぜひ手を動かしてみてください。

Jestとは

JestはJavaScriptのテストフレームワークです。TypeScriptでテストを書くこともできます。Jestは、フロントエンドライブラリのReactやVueなどのテストだけでなく、Node.js向けのパッケージのテストも行えます。要するに、JavaScriptやTypeScriptで書かれたコードであれば、そのほとんどはJestでテストが行えます。

このチュートリアルに必要なもの

このチュートリアルで必要なものは次のとおりです。

Node.js v16以上
Yarn v1系 (このチュートリアルはv1.22.19で動作確認しています)

Node.jsの導入については、開発環境の準備をご覧ください。

パッケージ管理ツールとしてYarnを利用します。最初にインストールをしておきましょう。すでにインストール済みの方はここのステップはスキップして大丈夫です。

shell
npm install -g yarn

shell
npm install -g yarn

プロジェクトを作成する

まず、このチュートリアルに使うプロジェクトを作成します。

shell
mkdir jest-tutorial
cd jest-tutorial

shell
mkdir jest-tutorial
cd jest-tutorial

プロジェクトルートにpackage.jsonを作ってください。

shell
touch package.json

shell
touch package.json

package.jsonの内容は次のようにします。

package.json
json
{
  "name": "jest-tutorial",
  "license": "UNLICENSED"
}

package.json
json
{
  "name": "jest-tutorial",
  "license": "UNLICENSED"
}

TypeScriptのインストール

プロジェクトにTypeScriptをインストールします。

shell
yarn add -D typescript

shell
yarn add -D typescript

次に、tsconfig.jsonを生成します。

shell
yarn tsc --init

shell
yarn tsc --init

Jestをインストールする

Jestをプロジェクトにインストールしましょう。インストールが必要なパッケージは、次の3つです。

jest
ts-jest
@types/jest

これらのインストールは次のコマンドで、一度にインストールできます。

shell
yarn add -D 'jest@^28.0.0' 'ts-jest@^28.0.0' '@types/jest@^28.0.0'

shell
yarn add -D 'jest@^28.0.0' 'ts-jest@^28.0.0' '@types/jest@^28.0.0'

jestはJest本体です。JavaScriptだけのプロジェクトであれば、このパッケージを入れるだけでテストが始められます。ts-jestは、JestをTypeScriptに対応させるためのものです。ts-jestを入れると、TypeScriptで書いたテストコードを、コンパイルの手間なしにそのまま実行できるようになります。@types/jestはJestのAPIの型定義ファイルです。TypeScriptの型情報を付与されるので、テストコードの型チェックが行えるようになります。

Jestの設定ファイルを作る

JestはそのままではTypeScriptを直接テストできません。なので、ここではJestでTypeScriptコードがテストできるように設定を加えます。

次のコマンドを実行すると、Jestの設定ファイルjest.config.jsが生成されます。

shell
yarn ts-jest config:init

shell
yarn ts-jest config:init

生成されたjest.config.jsの内容は次のようになります。

jest.config.js
ts
/** @type {import("ts-jest/dist/types").InitialOptionsTsJest} */
module.exports = {
  preset: "ts-jest",
  testEnvironment: "node",
};

jest.config.js
ts
/** @type {import("ts-jest/dist/types").InitialOptionsTsJest} */
module.exports = {
  preset: "ts-jest",
  testEnvironment: "node",
};

この@typeのコメントはエディターに型情報を与えるためのものです。これを書いておくことで、エディター上で入力補完が効くようになります。

チェックポイント

ここまでに作成したファイルに漏れがないか確認しましょう。

text
├── jest.config.js ... Jestの設定ファイル
├── node_modules ... jestやtypescriptがインストールされたフォルダ
├── package.json
├── tsconfig.json ... TypeScriptの設定ファイル
└── yarn.lock

text
├── jest.config.js ... Jestの設定ファイル
├── node_modules ... jestやtypescriptがインストールされたフォルダ
├── package.json
├── tsconfig.json ... TypeScriptの設定ファイル
└── yarn.lock

Jestが動くかを確認する

ここでは、実際のテストコードを書く前に、Jestでテストコードが実行できる状態になっているかを、動作確認用のテストファイルを作って確かめます。

Jestで実行できるテストファイルには命名規則があります。ファイル名が.test.tsまたは.spec.tsで終わるものが、テストファイルになります。動作確認用のファイルとして、check.test.tsを作ってください。

shell
touch check.test.ts

shell
touch check.test.ts

check.test.tsの内容は次のようにします。

check.test.ts
ts
test("check", () => {
  console.log("OK");
});

check.test.ts
ts
test("check", () => {
  console.log("OK");
});

ファイルを保存したら、jestコマンドを実行してみてください。

shell
yarn jest

shell
yarn jest

すると、次のような結果が出るはずです。

結果にcheck.test.tsが「PASS」と表示されていれば、テストファイルが実行されていることになります。

問題なく実行されていることが確認できたら、check.test.tsは削除してください。

削除するコマンド
shell
rm check.test.ts

削除するコマンド
shell
rm check.test.ts

このチュートリアルでテストする関数

ここからは、TypeScriptのテスト対象コードを書いて、それをテストしていきます。

具体的には、次のような簡単な関数のテストを書くことを例に進めていきます。

ts
function isZero(value: number): boolean {
  return value === 0;
}

ts
function isZero(value: number): boolean {
  return value === 0;
}

このisZero関数は、数値がゼロかどうかを判定するものです。

テスト対象のファイルを作る

まず、この関数を書いたファイルを作ります。ファイル名はisZero.tsにしてください。

shell
touch isZero.ts

shell
touch isZero.ts

このファイルを作ると、プロジェクトのファイル構成は次のようになります。

text
├── isZero.ts ... テスト対象ファイル
├── jest.config.js
├── node_modules
├── package.json
├── tsconfig.json
└── yarn.lock

text
├── isZero.ts ... テスト対象ファイル
├── jest.config.js
├── node_modules
├── package.json
├── tsconfig.json
└── yarn.lock

isZero.tsの内容は次のようにします。

isZero.ts
ts
function isZero(value: number): boolean {
  return value === 0;
}
// 注意: このままではテストできません。

isZero.ts
ts
function isZero(value: number): boolean {
  return value === 0;
}
// 注意: このままではテストできません。

このままではisZero関数はテストできません。Jestでテストできるようにするには、関数をエクスポートする必要があります。関数をエクスポートするために、functionの前にexportキーワードを追加してください。

isZero.ts
ts
export function isZero(value: number): boolean {
  return value === 0;
}

isZero.ts
ts
export function isZero(value: number): boolean {
  return value === 0;
}

テストコードを書く

上のisZero関数をテストするコードを書きます。

Jestではテストコードはテスト対象と別のファイルに書きます。テストファイルを作りましょう。ファイル名は、テストしたいファイル名に、.test.tsをつけたものにします。テスト対象ファイルがisZero.tsなので、ここではisZero.test.tsというファイル名にします。

shell
touch isZero.test.ts

shell
touch isZero.test.ts

このファイルを作ると、プロジェクトのファイル構成は次のようになります。

text
├── isZero.ts ... テスト対象ファイル
├── isZero.test.ts ... テストコードのファイル
├── jest.config.js
├── node_modules
├── package.json
├── tsconfig.json
└── yarn.lock

text
├── isZero.ts ... テスト対象ファイル
├── isZero.test.ts ... テストコードのファイル
├── jest.config.js
├── node_modules
├── package.json
├── tsconfig.json
└── yarn.lock

テスト対象の関数をテストコードで扱うには、まず関数をインポートする必要があります。import文を使って、isZero関数を読み込みましょう。

isZero.test.ts
ts
import { isZero } from "./isZero";

isZero.test.ts
ts
import { isZero } from "./isZero";

次に、1つ目のテストケースを追加します。このテストケースは、isZero関数に0を渡したらtrueが返るかをチェックするものです。

isZero.test.ts
ts
import { isZero } from "./isZero";
 
test("0を渡したらtrueになること", () => {
  const result = isZero(0);
  expect(result).toBe(true);
});

isZero.test.ts
ts
import { isZero } from "./isZero";
 
test("0を渡したらtrueになること", () => {
  const result = isZero(0);
  expect(result).toBe(true);
});

Jestではexpect関数とマッチャーを使い、結果が期待する値になっているかを記述します。マッチャーは、expect関数の戻り値に生えているメソッドです。上の例では、toBeがマッチャーになります。このメソッドの引数には期待値を書きます。上のテストケースでは、trueが期待値なので、toBe(true)と記述しています。

toBeマッチャーは、JavaScriptの厳密等価比較(===)と同じです。したがって、expect(result).toBe(true)は内部的にresult === trueかを評価します。もし、この評価が真なら、テストは合格します。逆に、偽ならテストは不合格となります。

マッチャーは、toBe以外にもさまざまなものがあります。このチュートリアルでは細かく解説しないので、詳しく知りたい方は、公式ドキュメントのリファレンスをご覧ください。

テストを実行する

1つ目のテストケースができたので、Jestでテストを実行してみましょう。

shell
yarn jest

shell
yarn jest

テスト結果は次のように表示されていれば、テストの実行ができています。

テストケースを追加する

さらにテストケースを追加してみましょう。今度は、isZero関数に1を渡して、戻り値がfalseになるかをチェックするケースを追加します。

isZero.test.ts
ts
import { isZero } from "./isZero";
 
test("0を渡したらtrueになること", () => {
  const result = isZero(0);
  expect(result).toBe(true);
});
 
test("1を渡したらfalseになること", () => {
  const result = isZero(1);
  expect(result).toBe(false);
});

isZero.test.ts
ts
import { isZero } from "./isZero";
 
test("0を渡したらtrueになること", () => {
  const result = isZero(0);
  expect(result).toBe(true);
});
 
test("1を渡したらfalseになること", () => {
  const result = isZero(1);
  expect(result).toBe(false);
});

テストケースを追加したら、再びJestを実行し、テストコードを走らせます。

shell
yarn jest

shell
yarn jest

今度は次のような結果になるはずです。

以上でJestを体験してみるチュートリアルは完了です。

Jestでテストを書こう

本章で学べること​

Jestとは​

このチュートリアルに必要なもの​

プロジェクトを作成する​

TypeScriptのインストール​

Jestをインストールする​

Jestの設定ファイルを作る​

チェックポイント​

Jestが動くかを確認する​

このチュートリアルでテストする関数​

テスト対象のファイルを作る​

テストコードを書く​

テストを実行する​

テストケースを追加する​