Jestテスト｜TypeScript×Vite環境でJestを使ってテストコードを書く

Jestとは

JavaScript/TypeScriptアプリケーションのテストフレームワーク。
特に React アプリのユニットテストでよく使われており、Facebook（Meta）が開発・保守している。

開発環境を準備｜Typescrip×Vite

Viteで開発環境を準備して、Typescripのテストコードを作成してみる。

⚠️はじめに環境を準備する際、create-react-appをインストールしたところ、パッケージに非推奨が含まれていると警告があった。
create-react-app が非推奨のため使用するべきではないとのこと。→そのため今回はviteを使用することに。
作成したディレクトリはrm -rf test-prac-tsで削除。

①ディレクトリ作成

ファイルを置きたいディレクトリ上で、vite最新版とtemplate react-ts（テンプレート）を使用してディレクトリ作成。
ディレクトリ名は 「test-prac-ts」とする。

npm create vite@latest test-prac-ts -- --template react-ts

⚠️注意：ts-jestが対応しているTypeScriptのバージョンは、4.3.0 - 5.0.0までとエラーが表示された。＞プロジェクトにインストールしていたTypeScriptのバージョンが5.8.3だったため4.9.5にダウングレード。npm install -D typescript@4.9.5

②プロジェクトにJestをインストール

作成したディレクトリtest-prac-tsへ移動し、Jestをインストール。

npm install --save-dev jest@^28.0.0 ts-jest@^28.0.0 @types/jest@^28.0.0

JestをTypeScriptで使用するのに、必要なパッケージ

• jest・・・jest本体
• ts-jest・・・JestをTypeScriptに対応させるためのもの
• @types/jest・・・JestのAPIの型定義ファイル

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

そのまま使用はできないため、JestでTypeScriptコードがテストできるように設定を加える。

npx ts-jest config:init

④pakage.jsonに2つの設定を加える

✅①scriptsにjestを追記
ここにセットすることで、npm run test をしたときにJestが起動する。

 "scripts": {
    "test": "jest"
  },

✅②type": "module"を削除

pakage.jsonに初期状態で記載されているtype": "module"を削除する。

type": "module"のまま、npm run test を行なったところ、「ReferenceError: module is not defined」が表示されたため。
原因はjest.config.jsの記述がCommonJSなのに対して、"type": "module"はES Modules(ESM)を指しているのでエラーが生じた。
削除することで解決。

⑤tsconfig.jsonの設定

tsconfig.jsonにesModuleInterop を trueを追記。

{
  "compilerOptions": {
    "esModuleInterop": true,
  }

Node.js や多くのライブラリは CommonJS 形式（module.exports や require）を使用しているけれど、TypeScript は標準的には ES Modules（export, import）を使う。

import * as express from 'express';→import express from 'express';

この書き方を許可するのが esModuleInterop: true の目的。

Jestが動くかを確認

🔸関数を記述したファイルを準備｜src/calc.ts

export const sum = ((a: number, b: number) => {
  return a + b;
});

🔸テスト用ファイルを準備｜calc.test.ts

テスト用のファイルの命名には規則がある。
Jest は.test.tsや .spec.tsのファイルを自動的に見つけて実行する。

そのためファイルの名は〇〇.test.tsなどにする必要がある。

import { sum } from "./calc"

test ('result should be 2', () => {
  expect(sum(1,1)).toBe(2);
});

先ほど作成した関数のファイル、src/calc.tsからsum関数をインポート。
'result should be 2'は、テストの名前を任意でつける。

expect()とマッチャー（今回は.toBe()）を合わせて期待通りか確認する。
「sum(1,1)の引数を渡すと、sum関数内で計算されてその結果は2を期待する」とテストする。

📝テスト構文の基本構文

①、②どちらもテストケースを定義する関数で、機能は同じとなる。

①  test("1 + 2 equals 3", () => { ... });

②  it("should return 3", () => { ... });

🔸テストを実行してみる

npm run test

🔸テスト結果をチェック

テストをすると下記がターミナルに表示させる。

PASS  src/calc.test.ts
  ✓ result should be 2

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.834 s, estimated 1 s

期待通りのテストの結果になっている✅

マッチャー（matchers）

Jestでよく使われるマッチャー（matchers）は、テストの「期待値」を確認するための関数で、たくさんある。
テスト内容に合わせて使用する。