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",
    },
  },
};

以上です。