TypeScriptの環境構築から分かる、Jestを使用したテストの方法

戸田駿太

2024.05.01

こんにちは、戸田です。

このブログではTypeScriptの環境構築からJestを使用した簡単な四則演算のテストの方法を解説します。

環境構築

まずは環境構築をします。今回はかなりシンプルな環境を構築します。

今回使用した環境は以下です。

Node.js v21.5.0
TypeScript v5.4.0
Jest v29.7.0

TypeScriptのインストール

package.jsonをセットアップする
npm init -y
 
TypeScriptをインストールする
npm install typescript --save-dev
 
Node.jsのプログラムに必要な型宣言ファイルnode.d.tsをインストール
npm install @types/node --save-dev
 
TypeScriptの設定ファイルtsconfig.jsonを初期化
npx tsc --init --rootDir src --outDir lib --esModuleInterop --resolveJsonModule --lib es6,dom --module commonjs

作業フォルダ・ファイルを作る

以下のようなファイル構造になるようにフォルダとファイルを作成してください TypeScriptのファイル名は何でもいいので自由に決めても大丈夫です。

.
└── src
    ├── index.ts
    └── tests
        └── index.test.ts

これでTypeScriptの環境が完成しました。

Jestのインストール

jestのインストール

npm i jest @types/jest ts-jest -D

プロジェクトフォルダにjest.config.jsを作成して以下を貼り付ける

module.exports = {
  "roots": [
    "<rootDir>/src"
  ],
  "testMatch": [
    "**/__tests__/**/*.+(ts|tsx|js)",
    "**/?(*.)+(spec|test).+(ts|tsx|js)"
  ],
  "transform": {
    "^.+\\.(ts|tsx)$": "ts-jest"
  },
}

テストを実行してみる

実行コード記述

// 足し算関数
export const add = (a: number, b: number) => a + b;

// 引き算関数
export const subtract = (a: number, b: number) => a - b;

// 掛け算関数
export const multiply = (a: number, b: number) => a * b;

// 割り算関数
export const divide = (a: number, b: number) => {
  if (b === 0) {
    throw new Error("0で割ることはできません");
  }
  return a / b;
};

テストコード記述

import { add, subtract, multiply, divide } from "../index";
// 足し算のテスト
test("1 + 2 = 3", () => {
  expect(add(1, 2)).toBe(3);
});

// 引き算のテスト
test("5 - 3 = 2", () => {
  expect(subtract(5, 3)).toBe(2);
});

// 掛け算のテスト
test("3 * 4 = 12", () => {
  expect(multiply(3, 4)).toBe(12);
});

// 割り算のテスト
test("10 / 2 = 5", () => {
  expect(divide(10, 2)).toBe(5);
});

// 0で割ることのテスト
test("10 / 0 で'0で割ることはできません'", () => {
  // エラーをスローする際はコールバック関数でないといけない
  expect(() => divide(10, 0)).toThrow("0で割ることはできません");
});

実行する

npx jest

実行結果

今回は全て動作が正しいのでエラーはありませんでした。

自分でコードを変えてエラーを発生させ、エラー時はどうなるのか確認するとテストの理解が深まります。

 PASS  src/tests/index.test.ts
  ✓ 1 + 2 = 3 (1 ms)
  ✓ 5 - 3 = 2
  ✓ 3 * 4 = 12
  ✓ 10 / 2 = 5
  ✓ 10 / 0 で'0で割ることはできません' (2 ms)

Test Suites: 1 passed, 1 total
Tests:       5 passed, 5 total
Snapshots:   0 total
Time:        0.734 s, estimated 1 s
Ran all test suites.

コードの説明

/src/index.tsは簡単な計算のプログラムなので説明は省きます。

このプログラムでは足し算のテストを行います。

test("1 + 2 = 3", () => {
  expect(add(1, 2)).toBe(3);
});

</pre>
<h3>test関数</h3>
<pre>test関数の第一引数にテスト名、第二引数にコールバック関数を記述します。 test関数の中で例外が起きるとエラーとなります。逆に例外が起きなければ成功になります

 test("テスト名", callback)