[JEST] Support for the experimental syntax 'jsx' isn't currently enabled が出たときの解消メモ

エラー内容

React コンポーネントを Jest でテストしようとすると、次のようなエラーが出ることがあります。 JSX をそのまま書いているだけなのに Jest が理解できず、テストが失敗してしまいます。

SyntaxError: Support for the experimental syntax 'jsx' isn't currently enabled

原因

Jest は JSX をそのまま理解できないため,JSX を JavaScript に変換する設定が必要になる。

以下のような場合、この設定が無いためエラーが発生する。

• Babel の設定を入れていない
• @babel/preset-react を使用していない

解決方法

Rootフォルダにbabel.config.jsonを作成し以下のコードを導入する

{
  "presets": [
    "@babel/preset-env",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ]
}