問題
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"を入れることで、新しい変換方式を有効にすることができるようです。
参考記事
おわりに
何をやってもずっと同じエラーが出続けてしまったので、解消に少し時間がかかりました。
エラーの理由は意外とシンプルだったので、同じエラーの方の参考になれば幸いです!