TypeScriptでJestを使ったテスト環境を構築する

TypeScriptでJestを使ったテスト環境を構築します。

パッケージのインストール

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

$ npm install -D jest ts-jest @types/jest ts-node

ts-nodeはTypeScriptの環境構築の過程ですでインストールしている場合があります。インストールしていない場合はts-nodeもインストールしてください。

設定ファイルを作成する

設定ファイルを作成します。本手順でインストールしたバージョンは29.3.1ですが、バージョンによって挙動や質問の内容が変更になっている場合があるのでご注意ください。

$ npx jest --init

The following questions will help Jest to create a suitable configuration for your project

✔ Would you like to use Jest when running "test" script in "package.json"? … yes
✔ Would you like to use Typescript for the configuration file? … yes
✔ Choose the test environment that will be used for testing › node
✔ Do you want Jest to add coverage reports? … yes
✔ Which provider should be used to instrument code for coverage? › v8
✔ Automatically clear mock calls, instances, contexts and results before every test? … yes

✏️  Modified /Users/t0k0sh1/Workspace/honeycomb/packages/cli/package.json

📝  Configuration file created at /Users/t0k0sh1/Workspace/honeycomb/packages/cli/jest.config.ts

ここでは、TypeScriptで設定ファイルを書く設定（2つ目の質問）にしています。ただ、実際に設定ファイルを出力してみると、JavaScriptで書かれた設定ファイルjest.config.jsも出力されました。これが正しい挙動かは不明ですが、複数の設定ファイルがあるとjestコマンドが実行できないため、以下のいずれかの対応を行なってください。

• TypeScriptで設定ファイルを定義したい場合はjest.config.js、jest.config.js.mapを削除する
• JavaScriptで設定ファイルを定義したい場合は2つ目の質問でnoを選択する

設定ファイルの出力後、jest.config.tsに1箇所修正を加えます。

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

この設定はテストコードを書いた時にimport/exportが使用できるようにするための設定です。

テストコードを書く

実際にテストコードを書いてみましょう。

まずはテスト対象のコードです。

export function greet(name: string): string {
  return `Hello ${name}`;
}

次にテストコードです。前述で設定を行なっているため、テストコード内でimportが使用可能です。

import { greet } from "./greeting";

test("Greeting is", () => {
  expect(greet("John")).toBe("Hello John");
});

テストを実行すると以下のようになります。

$ npm run test

> example@.1.0 test
> jest

 PASS  src/greeting.spec.ts
 PASS  dist/greeting.spec.js
-------------|---------|----------|---------|---------|-------------------
File         | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-------------|---------|----------|---------|---------|-------------------
All files    |     100 |      100 |     100 |     100 |                   
 greeting.ts |     100 |      100 |     100 |     100 |                   
-------------|---------|----------|---------|---------|-------------------

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