💡

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

らんす🍐2021/03/12に公開

はじめに

せっかく 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",
    },
  },
};

以上です。

GitHubで編集を提案
株式会社ナンバーフォー

「お客様のことを心から考えたソフトウェアを」 四葉のクローバー・ナンバーフォーを見つけて頂いたお客様に幸せをお約束できるそういう会社でありたいと考え開発に取り組んでいます

Discussion

ログインするとコメントできます