🌏

TypeScript対応したJest環境を構築する

2021/11/08に公開

もともとCommonJS仕様ベースで作られているっぽいJest。
自分の環境では、The 'import.meta' meta-property is only allowed using 'ESNext' for the 'target' and 'module' compiler options.のエラーが出るなど、ESM対応に少し苦戦したので、まとめました。

導入

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

各種設定ファイル

Jestのconfigファイルをtsファイルにしたかったのですが、下記のissueにあるとおりまだ解決していなかったっぽいので、cjsファイルにして設定しました（2021年11月8日時点）

jest.config.cjs

module.exports = {
  clearMocks: true,
  collectCoverage: true,
  collectCoverageFrom: [
    '<rootDir>/src/**/*.ts',
  ],
  coverageDirectory: "coverage",
  coverageProvider: "v8",
  globals: {
    "ts-jest": {
      useESM: true,
    }
  },
  extensionsToTreatAsEsm: ['.ts'],
  moduleNameMapper: {
    '^(\\.{1,2}/.*)\\.js$': '$1',
  },
  preset: 'ts-jest/presets/default-esm',
  testEnvironment: "node",
  transform: {
    "\\.[jt]sx?$": "ts-jest"
  },
};

package.json

  "scripts": {
    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
  },

jest --initをしたあとに、JESTのECMAScript Modulesの情報と、ts-nodeのESM Supportの情報を合わせます。
このとき、下記の設定を加えたらうまく動かなかったので省きました

  moduleNameMapper: {
    '^(\\.{1,2}/.*)\\.js$': '$1',
  },

導入

各種設定ファイル

Discussion