Vite+React環境で、Jestのテスト内でimport.meta.envを読めるようにする | SyntaxError: Cannot use 'import.meta' outside a module

はじめに

Viteで作成したReactアプリにJestを導入し、テストを書いて実行したところ
SyntaxError: Cannot use 'import.meta' outside a moduleというエラーで落ちてしまいました。
いくつか記事を調べてみたところ、Vite環境内でもimport.meta.envではなくprocess.envの書き方で環境変数にアクセスするように設定するという方法が主流でした。
しかし、できるだけアプリ側はViteが提供している標準的な記法のままでJestを実行できないか調べていたところ、便利な方法があったため以下記載します。

結論

babel-preset-viteを導入する。

使用方法

公式のREADME通り、以下の手順でインストール・babelの設定を行えばJest内でもimport.meta.envが読み込めるようになります。

インストール

npm install --save-dev babel-preset-vite

babel設定

.babelrcまたはbabel.config.jsで以下のように設定します。

{
  "presets": ["babel-preset-vite"]
}

Jest内でmeta.envだけ読み込めればよく、同じくVite環境でのみ生成されるmeta.globやmeta.hotは読み込まないように設定したい場合は以下のようなオプション設定も可能です。

{
  "presets": [
    [
      "babel-preset-vite",
      {
        "env": true, // defaults to true
        "glob": false, // defaults to true
        "hot": false // defaults to true
      }
    ]
  ]
}

原因

Viteで作成されたReact環境ではECMAScriptの記法が採用されている一方で、JestではCommonJSを前提としています。
これはbabel-jestなどのパッケージを導入することで、ECMAScriptのコードを問題なくJest上でテストすることが可能になりますが、今回問題となったimport.meta.envに関してはJavaScript標準のimport.metaオブジェクト内には存在しておらず、Viteが独自に提供しているプロパティであるようです。

パッケージの導入方法で少し触れていますが、import.meta.env以外にもViteが独自に提供しているプロパティとしてはglob, hotなどがあるようです。
それらをコード内で使用していた場合も、このパッケージを導入することでJestでエラーが出ないようになります。

参考記事

参考記事:

• jestでECMAScriptモジュールをテストする方法
  • https://kou029w.github.io/jest-hands-on/esm.html
• Vite特有のimport.metaプロパティ
  • https://qiita.com/ota-meshi/items/ff64c824e275ec049aad
• process.envを使用する方法
  • https://qiita.com/kikotkk/items/4644dc15c085473744ab
  • https://qiita.com/Sicut_study/items/d48bec20fa8b082a2368
  • https://scrapbox.io/diskszk/Vite%E3%81%A7%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E3%83%86%E3%82%B9%E3%83%88
• babel-preset-viteの導入
  • https://dev.to/rubymuibi/jest-and-vite-cannot-use-importmeta-outside-a-module-24n3