💡
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",
},
},
};
以上です。
Discussion