ReferenceError: React is not defined

問題

ReactとViteの環境下でjestとreact-testing-libraryを使用してtestしたときに下記のエラーがずっと出続けていました。

ReferenceError: React is not defined

やったこと

エラー内容からReactのimportが必要なのかと思ったので、関係するファイルへ明示的にimport React from "react";を記載して再度テストを実施。

エラーは解消されませんでした。

解決方法

.babelrcファイルへ"runtime": "automatic"を追加したところ、うまくいきました。

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

解決理由

React17以降に新しいJSX変換方式が導入されたようですが、新しい方を使用するにはBabelの設定を変更する必要があるようです。
新しいJSX変換方式のサポートによってimport React from "react";が不要になっていましたが、Babelの設定がデフォルトの古い変換方式になっていて、Reactインポートエラーが出ていたようでした。
"runtime": "automatic"を入れることで、新しい変換方式を有効にすることができるようです。

参考記事

おわりに

何をやってもずっと同じエラーが出続けてしまったので、解消に少し時間がかかりました。
エラーの理由は意外とシンプルだったので、同じエラーの方の参考になれば幸いです！