TypeScriptでのTDD/BDDで ts-jest を使用する

Motivation

TypeScriptを使用してフロントエンドとバックエンドを開発していますが、TDD/BDDのコードを書くときに babel-jest を使うのか ts-jest を使うかを検討しました。

結果としては ts-jest を使っているのですが、その理由と使い方をまとめます。

ts-jest を選んだ理由

公式ドキュメントにある理由からです。特にTypeCheckingがあるからJSからTSに移行した経緯があるので、 ts-jest を選びました。

1. Type CheckingがBabelではできない
2. namespace が使えない
3. enum が使えない（ただしこれは2019/09/05現在ではBabel7が対応していて使えます）
4. 型宣言のマージができない
5. 昔の import export の使い方ができない
6. カレットでのキャストができない

使い方

使い方を記します。

使い方の流れ

1. 必要なパッケージをインストールする
2. jest の設定ファイルを作成する
3. jest の設定ファイルを必要に応じて編集する

必要なパッケージをインストールする

npm

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

yarn

yarn add --dev jest typescript ts-jest @types/jest

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

npm

npx ts-jest config:init

yarn

yarn ts-jest config:init

jest の設定ファイルを必要に応じて編集する

baseUrl と paths を tsconfig.json で設定している場合

必要に応じての編集なのでここまでで ts-jest を使ってのTDD/BDDはできるようになっている方もいると思います。 ts-config.json で baseUrl と paths を使っている方はもう少し設定を追加しないと、 jest がファイルを見つけられなくて怒られるので設定を追加します。

公式ドキュメントをそのまま流用しますが、仮に ts-config.json で以下のように paths を設定しているとします。

{
  "compilerOptions": {
    "paths": {
      "@App/*": ["src/*"],
      "lib/*": ["common/*"]
    }
  }
}

この場合は jest にも上記の設定を読み込ませる必要があって二つの方法があります。

jest.config.js に直書き

module.exports = {
  // [...]
  moduleNameMapper: {
    '^@App/(.*)$': '<rootDir>/src/$1',
    '^lib/(.*)$': '<rootDir>/common/$1'
  }
};

ts-jest のユーティリティを使う

// jest.config.js
const { pathsToModuleNameMapper } = require('ts-jest/utils');
// In the following statement, replace `./tsconfig` with the path to your `tsconfig` file
// which contains the path mapping (ie the `compilerOptions.paths` option):
const { compilerOptions } = require('./tsconfig');

module.exports = {
  // [...]
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths /*, { prefix: '<rootDir>/' } */ )
};

これで tsconfig.json で設定されているパスを jest が読み込めるようになり、TDD/BDDをゴリゴリできるようになりました。

dotenv を使っている場合

dotenv を使っている場合は、テストファイルで dotenv を読み込むのではなく、 jest.config.js で設定してあげることによって jest が環境変数を読み込んでくれます。

module.exports = {
  setupFiles: ['dotenv/config']
};

TSCの特定のコンパイルエラーを無視したい場合

TypeScript の tsc は様々なチェックをしてくれてバグを防止してくれますが、テストのときはあえて無視したいチェックもあります。そのときは jest の config に該当するエラーコードを書いてあげると、そのエラーコードはテスト上無視できます。

例えば今回、TS6133 error (declared but its value is never read) を無視したいとします。その場合、以下のように書いてあげてください。

module.exports = {
  globals: {
    'ts-jest': {
      diagnostics: {
        /* Ignore the error "is declared, but not used."
        https://huafu.github.io/ts-jest/user/config/diagnostics */
        ignoreCodes: [6133],
      },
    },
  },
  ...
};

編集履歴

1. 2019/09/07 dotenv を使っている場合を追加
2. 2019/11/04 TSCの特定のコンパイルエラーを無視したい場合を追加