Ryo | Web developer blog

Web開発者のブログです。

TypeScript と Jest で単体テストの環境構築

f:id:ryogift:20210925195755j:plain
Freepik - jp.freepik.com によって作成された background ベクトル

目次

  1. 概要
  2. TypeScript とは
  3. Jest とは
  4. 環境
  5. プロジェクト作成
  6. コード例

1. 概要

TypeScript を使ってみたくなりましたが、単体テストを実行するまでの環境構築に手間取ったので、手順を残します。

2. TypeScript とは

まず初めに TypeScript とは何かについて、公式サイトに説明がありますので、そのまま引用します。

TypeScript は、型の構文を備えた JavaScript です。 TypeScript は、JavaScript に基づいて構築された強い型を持つプログラミング言語であり、 あらゆる規模で優れたツールを提供します。

www.typescriptlang.org

3. Jest とは

TypeScript に標準で組み込まれているテスティングフレームワークが無さそうなため、個人的に好きな Jest を使います。他にもテスティングフレームワークはありますが、最近は Jest の人気が高いので特にこだわりがなければ Jest 一択だと思っています。こちらも公式サイトに説明がありますので、そのまま引用します。

Jest はシンプルさを重視した、快適な JavaScript テスティングフレームワークです。

jestjs.io

4. 環境

今回は以下の環境で作成しました。

$ node -v
v16.3.0
$ npm -v
7.19.1

5. プロジェクト作成

フォルダ作成後に作成したフォルダに移動して、新規に npm パッケージをセットアップします。

$ mkdir ts-study && cd ts-study
$ npm init

実行に必要なパッケージをインストールします。

$ npm install --save-dev typescript jest ts-jest ts-node @types/jest @types/node

大まかなライブラリの説明

- ts-jest は、 Jest を使用して TypeScript で記述されたプロジェクトをテストできるソースマップをサポートする Jest トランスフォーマーです。
- ts-node は、 TypeScript の実行エンジンであり、 Node.js の REPL です。
- @types/jest は、 Jest の型定義が含まれています。
- @types/node は、 Node.js の型定義が含まれています。

TypeScript の設定ファイルと Jest の設定ファイルを作成します。 (npx は npm の v5.2.0 より同梱されているコマンドです。npm パッケージを簡単に実行できるコマンドです。)

$ npx tsc --init
$ npx jest --init

jest.config.js に以下の内容を設定します。

export default {
  // その他の設定内容は省略しています。

  // A list of paths to directories that Jest should use to search for files in
  roots: [
    "<rootDir>/src"
  ],

  // __tests__ディレクトリ以下にあるファイル または *.test.ts ファイルを探す
  testMatch: [
    "**/__tests__/**/*.+(ts)",
    "**/?(*.)+(test).+(ts)",
  ],

  // A map from regular expressions to paths to transformers
  transform: {"^.+\\.(ts)$": "ts-jest"},
};

今回は、以下のディレクトリ構成で作成しました。

├── src
    └── calc
        ├── calc.ts
        └── calc.test.ts
├── .gitignore
├── README.md
├── jest.config.ts
├── package-lock.json
├── package.json
└── tsconfig.json

今回作成したサンプルコードです。GitHubホスティングするにあたって、各種設定を追加しています。

github.com

6. コード例

簡単な四則演算のコードを書きました。

// src/calc/calc.ts
class Calc {
  readonly left: number;
  readonly right: number;

  constructor(left: number, right: number) {
    this.left = left;
    this.right = right;
  }

  add(): number {
    return this.left + this.right;
  }

  minus(): number {
    return this.left - this.right;
  }

  multiply(): number {
    return this.left * this.right;
  }

  divide(): number {
    return this.left / this.right;
  }
}

export default Calc;

先ほど作成した四則演算のテストコードです。

// src/calc/calc.test.ts
import Calc from "./calc";

test("add", () => {
  const calc = new Calc(1, 2);
  expect(calc.add()).toBe(3);
});

test("minus", () => {
  const calc = new Calc(2, 1);
  expect(calc.minus()).toBe(1);
});

test("multiply", () => {
  const calc = new Calc(2, 2);
  expect(calc.multiply()).toBe(4);
});

test("divide", () => {
  const calc = new Calc(4, 2);
  expect(calc.divide()).toBe(2);
});

テストの実行内容です。

$ npm test

> ts-study@1.0.0 test
> jest

 PASS  src/calc/calc.test.ts
  ✓ add (1 ms)
  ✓ minus
  ✓ multiply
  ✓ divide

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