「Cannot use JSX unless the '--jsx' flag is provided」エラー解決法

問題

jestとreact-testing-libraryを使用してテストを実施しようとしたら下記のエラーが出ました。

● Test suite failed to run
src/__tests__/AppComponent.spec.tsx:3:17 - error TS6142: Module '../App' was resolved to '自分のPCディレクトリ', but '--jsx' is not set.

 import App from "../App";
                  ~~~~~~~~
src/__tests__/AppComponent.spec.tsx:7:12 - error TS17004: Cannot use JSX unless the '--jsx' flag is provided.

     render(<App />);
             ~~~~~~~

原因

原因が何かわからなかったため、調べてみました。
このエラーが発生するのは、TSConfigでjsxのオプションが設定されておらず、jsxを使用しているにも関わらずTypescriptでの処理方法が記載されていないから起こるみたいです。

さまざまなサイトで以下の解決が紹介されていました。
tsconfig.jsonファイルに以下を追加、または既存のものがあれば変更を行う。

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react"
  }
}

またある情報ではreactではなく、preserveにするといいともありました。

私はどちらも試しましてみましたが、エラーは解消されませんでした。

解決

その後もいろいろ試しているうちに、環境ファイルの一部を以下のように変更することで解決できました。

まず、jestconfigの設定を以下のようにします。

jest.config.js

export default {
    preset: "ts-jest",
    testEnvironment: "jsdom",
    setupFilesAfterEnv:['<rootDir>/jest.setup.ts'],
    transform: {
      '^.+\\.(ts|tsx)$': ['ts-jest', {
        tsconfig: 'tsconfig.app.json',
      }],
    },
    moduleNameMapper: {
      '^.+\\.svg$': 'jest-svg-transformer',
      "\\.(css|less)$": "identity-obj-proxy",
    },
    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  };
  

変更点としては、setupFilesAfterEnv:['/jest.setup.ts']の部分にrootDirを追加したことです。このように明示的に参照先を指定することで正しいディレクトリを参照するようにできます。
おそらくjest.configファイルが読み込まれていなかったので、エラーが出ていたのかと思います。

あとは、tsconfing.app.jsonを以下のように変更しました。(このファイルがなければtsconfig.jsonで問題ないと思います）
主な変更点は、typesとallowSyntheticDefaultImportsを追加し、includeの一部を変更しました。

事象解決に直接関係しているかはわからないので、上記のjestconfigを修正してみてダメだった場合に追加するなどの対応の方がいいと思います。

tsconfing.app.json

{
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",
    "types": ["node", "jest", "@testing-library/jest-dom"],

    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["src", "./jest.setup.ts", "./src/ts/**/*"]
}

おわりに

今回は、インターネット上に出ている情報をいくつも試してみましたが解決に至らず時間がかかりました。AIに助けてもらいつつ、試行錯誤する中で無事解決できました。同じようなエラーで悩む方の参考になれば幸いです！