【Jest✕React】Jestを用いたテストの実行時、「supabaseUrl is required.」が表示される。

はじめに

Jestを用いたReactアプリのテストを実行した際に直面したエラーに対する解決方法を紹介します。

問題

Jestを用いたテストコードを実行した際、「supabaseUrl is required.」というエラーが表示され、テストが通らない。
ぱっと見た感じ、環境変数を読み込めてないからなんだろうなと思いつつググってみたところやっぱりそうでした。

エラーログ

    supabaseUrl is required.

      1 | import { createClient } from '@supabase/supabase-js'
      2 |
    > 3 | const supabase = createClient(
        |                              ^
      4 |     import.meta.env.VITE_SUPABASE_URL,
      5 |     import.meta.env.VITE_SUPABASE_ANON_KEY
      6 | );

参考↓

ESModule/CommonJSの形式の違いによってenvの値が読み込めないようです。
この記事の方は環境変数の読み込み方法を「process.env」に変更することで対応しているようです。

解決方法

テストを通すためにコードの方を変えるのはなんか嫌だなと思っていましたが、
よく考えたらテストでsupabaseに接続する必要はないよなと思い、createClient自体をモック化することで対応しました。
（そうしないとテスト実行時にsupabaseのインスタンスも同時に起動していないとテストが通らなくなってしまう。）
というわけで以下のコードをテスト実行前のところに追記。

App.test.jsx

// createClient関数をモック
jest.mock('@supabase/supabase-js', () => ({
    createClient: jest.fn(() => ({
        from: jest.fn().mockReturnThis(),
        select: jest.fn().mockResolvedValue({ data: [], error: null }),
        insert: jest.fn().mockResolvedValue({ error: null }),
        delete: jest.fn().mockResolvedValue({ data: [], error: null }),
        eq: jest.fn().mockReturnThis(),
    })),
}));

テストコード全体

App.test.jsx

/**
 * @jest-environment jsdom
 */
import React from "react";
import App from "../App";
import '@testing-library/jest-dom'
import { render, screen, waitFor } from "@testing-library/react";

// createClient関数をモック
jest.mock('@supabase/supabase-js', () => ({
    createClient: jest.fn(() => ({
        from: jest.fn().mockReturnThis(),
        select: jest.fn().mockResolvedValue({ data: [], error: null }),
        insert: jest.fn().mockResolvedValue({ error: null }),
        delete: jest.fn().mockResolvedValue({ data: [], error: null }),
        eq: jest.fn().mockReturnThis(),
    })),
}));

describe("初期表示のテスト", () => {

    test("タイトルが画面上に表示されること", async () => {
        render(<App />);
        const headElement = screen.getByRole('heading', { name: '学習記録一覧' });
        await waitFor(() => {
            expect(headElement).toBeInTheDocument();
        });
    });
});

おわりに

問題のところに記載した「supabaseUrl is required.」が表示された際、試しにenvに定義されていたキー情報をcreateClientにそのまま直接入れてみたらテストが通ったのでアタリがつけられました。
エラー発生時はこんな感じで、どこが原因になっていて発生しているのか問題を切り分けるようにすることが大切ですね！

JISOUのメンバー募集中🔥

プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからライン登録お願いします！👇