Vite環境でJest使おうとするとSyntaxError: Cannot use 'import.meta' outside a moduleが出る

はじめに

Vite環境でJestを使う際に色々エラー出たので解決策を書いておきます。

問題１

npm run testした際に以下のエラーが出る。

SyntaxError: Cannot use 'import.meta' outside a module

解決策

ネットで色々調べたところ、import.metaはviteによって提供される機能なため、デフォルトではjestやnode.jsでは認識されないみたいです。なのでviteでimport.metaではなくprocess.envを使えるようにしてあげる必要があります。今回はsupabaseから環境変数を利用しているため以下のように修正します。

/*---vite.config.js---*/
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
+ import env from "vite-plugin-env-compatible";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
+    env({ prefix: "VITE",  mountedPath: "process.env" }) 
  ],
})

/*---supabase.js---*/
import { createClient } from '@supabase/supabase-js';

- const SUPABASE_URL = import.meta.env.VITE_SUPABASE_URL;
+ const SUPABASE_URL = process.env.VITE_SUPABASE_URL;

- const SUPABASE_ANON_KEY = import.meta.env.VITE_SUPABASE_ANON_KEY;
+ const SUPABASE_ANON_KEY = process.env.VITE_SUPABASE_ANON_KEY;

export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

問題２

これで解決したと思ったら今度は以下のエラーが出る。

Configuration error:
    
Could not locate module ./App.css mapped as:
identity-obj-proxy.
    
Please check your configuration for these entries:
{
  "moduleNameMapper": {
    "/\.(css|less)$/": "identity-obj-proxy"
  },
  "resolver": undefined
}

解決策

gptさんに尋ねたところ、identity-obj-proxyがCSSファイルをモックするための設定が必要だが現在の設定でそれが見つかっていないとしてエラーが出ているとのことでした。

/*---jest.config.mjs---*/
export default {
  testEnvironment: "jsdom",
  // CSSファイルをモックするための設定をここでできている
  moduleNameMapper: {
    "\\.(css|less)$": "identity-obj-proxy"
  },
  setupFilesAfterEnv: ["./jest.setup.js"]
};

コードは問題なさそうです。シンプルにdentity-obj-proxyパッケージがインストールされてなかったのが原因でした。これをインストールしたら無事テストが通りました。

$npm install --save-dev identity-obj-proxy

jestの設定周りは意外と大変ですね。

おわりに

vite環境でjest使う際は多くの方がこのエラーに遭遇するのではないでしょうか？少しでも参考になりましたら幸いです。

参考

vite jest envと調べると色々出てきます。

JISOUのメンバー募集中

プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？

気になる方はぜひHPからライン登録お願いします