How to mock useSupabaseClient composable?

[jimmiejackson414]

I'm hoping someone has worked through a similar issue, but I'm having the hardest time figuring out how to mock the useSupabaseClient composable. Granted I'm not great at Vitest. Here is what I have currently which has gotten past the first couple sets of Supabase/vitest-related errors:

import { mockNuxtImport, mountSuspended } from '@nuxt/test-utils/runtime';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { createTestingPinia } from '@pinia/testing';
import app from '@/app.vue';
import { profile } from '@/tests/unit/mocks/app.mock';
import GcNavbar from '@/components/common/GcNavbar.vue';
import GcNavbarAlt from '@/components/common/GcNavbarAlt.vue';
import GcDrawer from '@/components/common/GcDrawer.vue';

const { useSupabaseClient } = vi.hoisted(() => {
  return {
    useSupabaseClient: vi.fn()
      .mockImplementation(() => {
        console.log(`Mocked useSupabaseClient is being used`); <-- is being returned
        return {
          auth: {
            onAuthStateChange: vi.fn(),
          },
          realtime: {
            removeAllChannels: vi.fn(),
          },
          rpc: vi.fn()
            .mockImplementation(() => {
              console.log(`Mocked rpc method is being used`); <-- is NOT being returned
              return Promise.resolve({ data: {}, error: null });
            }),
          storage: {
            from: () => ({
              getPublicUrl: (url: string) => ({
                data: { publicUrl: url },
              }),
            }),
          },
        };
      }),
  };
});
mockNuxtImport('useSupabaseClient', () => useSupabaseClient);

describe('App', async () => {
  describe('App Component', async () => {
    it('calls useSupabaseClient', async () => {
      await mountSuspended(app, {
        global: {
          plugins: [createTestingPinia({
            initialState: {
              user: {
                profile,
              },
            },
          })],
        },
      });

      expect(useSupabaseClient)
        .toHaveBeenCalled();
    });

    it('renders the app', async () => {
      const wrapper = await mountSuspended(app, {
        global: {
          plugins: [createTestingPinia({
            initialState: {
              user: {
                profile,
              },
            },
          })],
        },
      });

      expect(wrapper.exists())
        .toBe(true);
    });
  });
});

In my Vue component, I have a fairly simple use of an .rpc function:

  const fetchDashboard = async () => {
    const supabase = useSupabaseClient<Database>();
    console.log(`supbase: `, supabase); <-- Returns undefined when running tests
    loading.value = true;

    try {
      const user = useSupabaseUser();

      // fetch dashboard data from supabase
      const { data: pageData, error } = await supabase
        .rpc('get_dashboard_data', {
          p_user_id: user.value!.id,
        })
        .returns<DashboardData>();

       ...
    } catch (err) {
      console.log(`fetchDashboard err: `, err);
      console.error({ err });
    } finally {
      loading.value = false;
    }
  };

  await fetchDashboard();

And here is the error I'm seeing when running the test from my terminal:

fetchDashboard err:  TypeError: Cannot read properties of undefined (reading 'rpc')
    at fetchDashboard (/.../my_project/pages/index.vue:51:25)
    at /.../my_project/pages/index.vue:85:15
    at Module.withAsyncContext (/.../my_project/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3374:19)
    at setup (/.../my_project/pages/index.vue:85:15)

So how do I correctly mock the .rpc function on the useSupabaseClient composable? For that matter, is there a better way of handling this in general?

Edit
I should also mention that I've been receiving env variable errors when running the vitest tests, even though they are most definitely set in my .env file and works just fine in the application.

Missing supabase url, set it either in `nuxt.config.js` or via env variable
Missing supabase anon key, set it either in `nuxt.config.js` or via env variable

[Nagell]

The last one could be an answer indeed.
As mentioned in the Nuxt Testing docs to have an access to the env variables during the testing you require an .env.test file. Most probably you can just copy your local .env file and rename it.