TypeScript + Jest で「JSX が使えない／TS1286・TS17004・TS6142 エラー」を解消する方法

はじめに

jestを使用したテストを実装する際に、TypeScriptでエラーが発生し解消に時間がかかってしまったため解消方法を記述します。セットアップで困っている人向けの記事になります。

エラー内容

JSX フラグがないエラー

TS17004: Cannot use JSX unless the '--jsx' flag is provided.

・テストファイル内でコンポーネントを使用したテストを記述したが、TypeScriptがJSXの設定を読み込んでいないエラー。

モジュール解決エラー

TS6142: Module '../GameCard' was resolved to '.../GameCard.tsx', but '--jsx' is not set.

・import したコンポーネントを TypeScript は見つけたが、JSX をコンパイルする設定が無いためエラー

ESM/CommonJS 衝突エラー

TS1286: ESM syntax is not allowed in a CommonJS module when 'verbatimModuleSyntax' is enabled

・tsconfig の "verbatimModuleSyntax": true と Jestの組み合わせで発生したエラー

js-domの不一致

: As of Jest 28 "jest-environment-jsdom" is no longer shipped by default, make sure to install it separately.

Jest 28 以降、jest-environment-jsdom がデフォルトで同梱されなくなったため下記もインストールすること

npm install --save-dev jest-environment-jsdom

原因

Vite + TypeScript プロジェクトでは、tsconfig.app.json に "verbatimModuleSyntax": true が初期設定されていることが原因になりやすいです。

さらにjestは内部的にCommonJS で動くため、ts-jest がそのまま JSX や import/export を処理することができません。

さらに tsconfig.jsonの初期設定である (references) を使った構成だと、ts-jest が JSX 設定を読み取れない場合があります。

解決策 ： Jest 用の tsconfig を作る

tsconfig.jest.json

{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "moduleResolution": "node",   //Jest + ts-jest が正しくモジュール解決
    "esModuleInterop": true,
    "verbatimModuleSyntax": false //falseにすることでESM import/exportを CommonJS に変換可能
  }
}

変更内容

moduleResolution

→TypeScript が import 文で指定されたモジュールをどうやって探すか、ルールを決める設定
　"node"：Node.js のモジュール解決ルールに従う設定

esModuleInterop

→trueにすることにより、下記のように書ける

import fs from "fs";      //true
import * as fs from "fs"; //false

verbatimModuleSyntax

→falseにすることにより、CommonJS やターゲット環境に応じて変換
・Jest（CommonJS 前提）では false にしないと TS1286 エラーが出る

jest.config.cjs で tsconfig を指定

module.exports = {
  testEnvironment: "jest-environment-jsdom",　//明示的にしていすること
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
  transform: {
    "^.+\\.tsx?$": ["ts-jest", { tsconfig: "<rootDir>/tsconfig.jest.json" }], // tsconfig指定
  },
};

これで、renderが正しくコンパイルされます

CommonJS

CommonJSとは Node.js で使われてきたモジュール規格
→require() / module.exports

ESM

ESMとは import / export を使う最新規格
CommonJS：古い Node.js 標準
Jest はデフォルトで CommonJS 前提なので、ESM のままではコンパイルエラーが出る

まとめ

jestでTypeScrirptを使用すると、さまざまな設定が必要になります。
今回は新しく、tsconfig.jest.jsonを定義することで、もともとのファイルに干渉することなく解決することができたので、皆さんもよければ試してください。

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！