More than 1 year has passed since last update.

[Node.js][Jest] Jestでテストを行う

Last updated at 2024-11-13Posted at 2024-07-31

環境

MacBook Pro (2.3 GHz 8コアIntel Core i9)
macOS 14.0（23A344）
Homebrew 4.3.8
gh 2.52.0

プロジェクトを作成する

プロジェクト（ディレクトリ）を作成する
```
mkdir jest-tutorial
```
ディレクトリに移動する
```
cd jest-tutorial
```
プロジェクトルート※1にpackage.jsonを作成する
```
touch package.json
```

package.jsonに下記を記載する

package.json

{
  "name": "jest-tutorial",
  "license": "UNLICENSED"
}

package.jsonに下記を記載する
package.json
```
"scripts": {
  "test": "jest"
}
```

※1

プロジェクトルートは、すべてのプロジェクトソースの親であるフォルダーです。

TypeScriptのインストール

TypeScriptコンパイラをインストールする※2
```
npm install typescript
```
※2
```
npm install -g typescript
```
※2

-gオプションを付けると、グローバルでインストールされる。各PJでバージョンを分けたい場合は-gオプションを付けずにインストールを行う
tscコマンドが実行できるか確認する※3
```
npx tsc -v
//出力結果
Version 5.5.4
```
※3
```
tsc -v
//出力結果
Version 5.5.4
```
※3

グローバルでインストールしてる場合は、npxコマンドを最初につける必要ながない

パッケージ（Jest関連）のインストール

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

※4

下記のように非推奨のinflight globパッケージがインストールされている警告が出るが、無視できる。

必要であれば、下記でパッケージの依存関係を調べることができる。

npm ls inflight

Jestの設定ファイルを作成する

Jestの設定ファイル（jest.config.js）を作成する
```
npx ts-jest config:init
```
Jestの設定ファイル（jest.config.js）に下記を記載する
jest.config.js
```
module.exports = {
  preset: 'ts-jest',
  testEnviroment: 'node'
}
```

Jestが動くかを確認する

動作確認用テストファイル（check.test.ts）を作成する
```
touch check.test.ts
```
動作確認用テストファイル（check.test.ts）に下記を記載する
check.test.ts
```
test("check", () => {
  console.log("OK");
});
```
package.jsonに下記を記載する（すでに上で記載済みの場合は不要）
package.json
```
"scripts": {
  "test": "jest"
}
```
jestコマンドでテスト実行する
```
npm run test
```
or
```
npm test
```
下記の結果となれば問題なくcheck.test.tsファイルが実行されたことが確認できる

テストを実施する

テストファイル（isZero.ts）を作成する
```
touch isZero.ts
```

テストファイル（isZero.ts）に下記を記載する

isZero.ts

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

componentとして使用できるよう、関数をエクスポートする

isZero.ts

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

isZero.tsのテストが実行できるように、テストコードを作成する
```
touch isZero.test.ts
```
テストコードでisZero.tsのテストが実行できるように、関数をインポートする
js.isZero.test.ts
```
import { isZero } from "./isZero";
```

isZero関数に0を渡したらtrueが返るかをチェックするテストコードを書く

js.isZero.test.ts

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

jestコマンドでテスト実行する
```
npm run test
```

テストケースを追加する

js.isZero.test.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コマンドでテスト実行する
```
npm run test
```

ディレクトリ構成

directory_structure

drive/ ←ルートディレクトリ
├── Applications/
├── Syetem/
└── Usr/ ←usr/（隠しファイル）とは異なるファイル
│   ├── shared/
│   └── personnel(ex. Jochun)/　←ホームディレクトリ
│       ├── jest-tutorial/
│       │   ├── node_modules/ ←TypeScriptのコンパイラ
│       │   ├── package.json 
│       │   ├── check.test.ts ←Jestが動くかを確認する
│       │   ├── isZero.ts ←
│       │   └── isZero.test.ts ←
│       ├── MyVagrant/
│       ├── Desktop/
│       ├── Downloads/
│       ├── Documents/
│       ├── .config/
│       ├── .ssh/
│       ├── .zshrc/
│       └── .local/
│       │   ├── .bin
│       │   ├──

参考リンク

`-g`オプションについて

`-D`オプションについて

そろそろ適当に npm install するのを卒業する

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up