Visual Studio Code + TypeScript + Jest でTDD(テスト駆動開発)入門

環境構築

Visual Studio Codeで、TypeScript, Jestをインストールします。依存関係のあるパッケージがどんどんバージョンアップされて急に動かなくなることもあるので、とりあえず2021/03/08時点の内容です。

プロジェクト雛形作り

Visual Studio Code内でどこか適当にディレクトリを作って、Terminal実行。
これがプロジェクトのルートディレクトリになる。

$ npm init -y
$ tsc -init

Jestインストール

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

package.jsonの編集

2021/3/8時点では以下のような依存関係になりました。そのままだとnpx jestが動かないので、dependencies部分を追加。

package.json

{
  "name": "jest2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/jest": "^26.0.20",
    "jest": "^26.6.3",
    "ts-jest": "^26.5.3",
    "typescript": "^4.2.3"
  },
// 以下を追加
  "dependencies": {
    "ts-node": "^9.1.1"
  }
}

プロジェクトのjestの設定初期化

npx jest --init

jest.config.json

roots: [
  "<rootDir>/src"
],

transform: {
  "^.+\\.(ts|tsx)$": "ts-jest"
},

ts-nodeの依存関係追加

そのまま npm t でテスト実行するとts-nodeがないと怒られるので、ts-nodeをインストール

npm install --save typescript ts-node

これで環境構築完了。

テスト実行

テスト実行はnpm tで実行できます。

npm t

ソースコードファイルとテストコードファイルの置き場

これまでの例ではプロジェクト直下にソースとテストを置いてましたが、ソースとテストのルートディレクトリは分けるのが普通です。
ソースのルートディレクトリは、ts.configに設定 rootDirがそれにあたります。
慣例的にソースのルートは "src"にしています。

ts.config

{
     // 色々設定が他にもあるけど・・・
     "rootDir": "./src",   
     // 色々設定が他にもあるけど・・・
}

テストのルートは、
jest.config.jsonに記載します。
これも慣例的には、"test"ディレクトリをテストルートにします。
ディレクトリ構造は、ソースのディレクトリを模倣する形のほうがわかりやすいです。

jest.config.json

export default {
  roots: [
    "<rootDir>/test"
  ],
}

とりあえずこれでテスト実行できました！(2020/03/08時点）

TDDをはじめる

さてここからが本題です。テスト駆動開発です。
記載中・・・

参考にしたサイト

以下のサイトを参考にしました！ありがとうございました！！