JestのテストもTypeScriptで書きたい

はじめに

せっかく TypeScript で型セーフなプロダクトを書いたので、どうぜならテストも TypeScript で書きたいので、環境構築手順をまとめておきます。
※ node や typescript の導入は完了している前提で進めていきます。

モジュールのインストール

console

# 必要なmoduleのインストール
npm i -D jest @types/jest ts-jest

設定ファイルの作成

tsconfig.jest.json

{
  "extends": "./tsconfig.json",
}

※ テスト用に ts-config.json の内容を override したい場合があるので。テスト用別ファイルを用意しておきます。
　compilerOptions.jsxだけreact-jsxで上書きしたいとか...

jest.config.js

/**
 * Jest Configuration
 */
module.exports = {
  preset: "ts-jest",
  testEnvironment: "jsdom",
  globals: {
    "ts-jest": {
      tsconfig: "tsconfig.jest.json",
    },
  },
};

ts-config で paths をカスタムしている場合

そのままだと import のパス解決ができず、エラーとなるため、追加で設定が必要です。

console

# 追加moduleのインストール
npm i -D jsonc-parser

通常 json ファイルは require で読み込めますが、コメント有の json(jsonc?)は require で読み込むとエラーとなるため、ロード用の module を使います。

jest.config.js

/**
 * Jest Configuration
 */
const { pathsToModuleNameMapper } = require("ts-jest/utils");
const { readFileSync } = require("fs");
const { parse } = require("jsonc-parser");
// extendsを自動的に解決してマージできないため、compilerOptions.pathsを書いているファイルを指定する
const { compilerOptions } = parse(readFileSync("./tsconfig.json").toString());
const moduleNameMapper = pathsToModuleNameMapper(compilerOptions.paths, { prefix: "<rootDir>/" });

module.exports = {
  preset: "ts-jest",
  testEnvironment: "jsdom",
  moduleNameMapper,
  globals: {
    "ts-jest": {
      tsconfig: "tsconfig.jest.json",
    },
  },
};

以上です。