TypeScriptとJestを使用したテスト環境を構築する

概要

TypeScript と Jest を使用して、テスト技法からテストコードを作成し実行するための環境構築手順を解説します。

対象者

• TypeScript と Jest を使用したテスト環境を構築したい人
• テスト技法を学び始める人
• テスト駆動開発を学び始める人

推奨環境

• Win または Mac
• Visual Studio Code
• Node.js

環境構築

テスト環境の構築は、以下の手順に従って行います。

1. プロジェクトを作成する

任意の場所に新しいプロジェクトを作成します。
Win ならエクスプローラー、Mac ならファインダーを使用しても構いません。

mkdir test-dir

2. プロジェクトを開く

作成したプロジェクトを Visual Studio Code で開きます。
codeが見つからない場合は、Visual Studio Code から開きます。

code　test-dir

3. package.json を生成する

npm initで package.json を生成します。
-yオプションがない場合は、対話的に package.json を生成します。

npm init -y

4. パッケージをインストールする

テストケースを作成し実行するだけの最低限のパッケージをインストールします。
使用言語は TypeScript なので、typescriptのパッケージをインストールします。
テストツールは Jest なので、jest、@types/jest、ts-jestをインストールします。

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

5. jest.config.js を生成する

ts-jest config:init で Jest の設定ファイルである jest.config.js を生成します。

npx ts-jest config:init

これが生成されたjest.config.jsです。

jest.config.js

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  preset: "ts-jest",
  testEnvironment: "node",
};

6. 動作確認用のファイルを作成する

プロジェクト内に src ディレクトリを作成し、その中に動作確認用の sample ディレクトリを作成します。
sample ディレクトリの中に、テスト対象のファイルを作成します。

src/sample/sum.ts

export function sum(a: number, b: number) {
  return a + b;
}

sample ディレクトリの中に、テストファイルを作成します。
テストのファイル名は、*.spec.ts または*.test.ts にします。

src/sample/sum.test.ts

import { sum } from "./sum";

test("adds 1 + 2 to equal 3", () => {
  expect(sum(1, 2)).toBe(3);
});

7. テストの実行

jestでテストを実行します。
jestのみだとプロジェクト全体を対象にテストを実行します。
jestの後にファイルやディレクトリを指定すると指定対象のみテストを実行します。

npx jest src/sample

これはテスト結果です。

$ npx jest src/sample
ts-jest[config] (WARN) message TS151001: If you have issues related to imports, you should consider setting `esModuleInterop` to `true` in your TypeScript configuration file (usually `tsconfig.json`). See https://blogs.msdn.microsoft.com/typescript/2018/01/31/announcing-typescript-2-7/#easier-ecmascript-module-interoperability for more information.
 PASS  src/sample/sum.test.ts
  ✓ adds 1 + 2 to equal 3 (1 ms)

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

もしWARNが出た場合は、TypeScript の設定ファイルであるtsconfig.jsonを作成することで警告を消すことができます。

tsc --initで tsconfig.json を生成します。

npx tsc --init

これは生成された tsconfig.json を一部書き換えています。

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ES2022",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}