ReferenceError: Cannot access 'mockUser' before initializationのエラーの解消方法

はじめに

テスト作成において記述順があっているはずだが、エラーが発生し続けたので解消方法を記述しようと思います。

エラー内容

ReferenceError: Cannot access 'mockUser' before initialization

これは、jest.mock の中で mockUser を使っていますが、mockUser の宣言より前に実行されるため、JavaScriptより参照できないと怒られてしまっています。

エラー内容のコード

const mockUser = { ... };  // 宣言済み
jest.mock("../../supabaseClient", () => {
  supabase: {
    ...
    single: jest.fn().mockResolvedValue({ data: mockUser, error: null }),
  }
});

最初に記述している内容だと、間違いなく先に宣言していたのですがエラーとなっておりました。

ですが、jest.mock はモジュールのトップレベルで即座に評価されるので、外で定義した mockUser を参照しても、Jest がモジュールを読み込むタイミングによってはまだ mockUser が初期化されていない という現象が起きます。

解決策

jest.mockの中にmockUserを記述しました。

jest.mock("../../supabaseClient", () => {
const mockUser = { ... };  // 宣言
  supabase: {
    ...
    single: jest.fn().mockResolvedValue({ data: mockUser, error: null }),
  }
});

こうすることによりjest.mockの中で一番最初に参照されるため、呼び出し順のエラーを防ぐことに成功しました。
しかしこの記述方法ではコードの下の方にmockUserを使用している場合は、参照できなくなってしまうので、それは別の参照ファイルでmockUserを作成し力技で解決しました。💦

おわりに

今回はjest.mock内で参照し、更にmockUserファイルを作成し二度宣言してしまっているので他の解決策などがあれば教えていただきたいです。🙏

ISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！