【Jest】エラー「SyntaxError: Unexpected token import.meta」の原因と解決法

はじめに

Viteで動いていたReactアプリをJestでテストしたところ、
次のようなエラーが出ました。

SyntaxError: Unexpected token import.meta

原因

Viteで使われている import.meta 構文をBabelが理解できないことが原因です。
Babelはデフォルトでは import.meta をサポートしていません。
Viteが内部で利用しているこの構文をそのままJestに渡すと構文エラーになります。

解決法

.babelrc にプラグインを追加して、Babelが import.meta を解釈できるようにします。

.babelrc

{
  "presets": [
    "@babel/preset-env",
    ["@babel/preset-react", { "runtime": "automatic" }]
  ],
  "plugins": [["transform-import-meta", { "module": "ES6" }]]
}

次に、依存関係を追加します。

$ npm install -D babel-plugin-transform-import-meta

これでimport.meta構文がBabelでも正しく変換されるようになります。

まとめ

エラーがきっかけでimport.metaがVite専用の構文であることを知ることができました。
同じようなエラーで困っている方の参考になれば幸いです。