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.

[yakubka]

The standard approach is mockNuxtImport from @nuxt/test-utils, which intercepts the auto-import before it reaches Vitest. Here is a working pattern:

import { mockNuxtImport } from "@nuxt/test-utils/runtime"

const mockSelect = vi.fn().mockResolvedValue({ data: [], error: null })
const mockFrom = vi.fn(() => ({ select: mockSelect }))
const mockClient = { from: mockFrom }

mockNuxtImport("useSupabaseClient", () => {
return () => mockClient
})

The key points:

1. mockNuxtImport must be called at the top level of the test file, not inside a beforeEach or describe. It runs at module evaluation time, before the component is imported.

2. The factory function returns a function (because useSupabaseClient is a composable, i.e. a function), not the client object directly.

3. If you need to change the mock per test, mutate the vi.fn() implementations instead of calling mockNuxtImport again.

If you are not using @nuxt/test-utils (running Vitest outside the Nuxt test environment) you can also do a manual module mock:

vi.mock("#imports", () => ({
useSupabaseClient: () => mockClient,
useSupabaseUser: () => ref(null),
}))

This works when you are mounting components with mountSuspended.

[yakubka]

The mockNuxtImport function from @nuxt/test-utils is the recommended approach for mocking Nuxt auto-imported composables, and useSupabaseClient falls into that category.

The factory you pass to mockNuxtImport should return the composable itself (a function), not the mock return value directly. The inner function is what useSupabaseClient becomes in your component, so calling useSupabaseClient() calls that inner function:

import { mockNuxtImport } from "@nuxt/test-utils/runtime"

mockNuxtImport("useSupabaseClient", () => {
  return () => ({
    auth: {
      onAuthStateChange: vi.fn().mockReturnValue({
        data: { subscription: { unsubscribe: vi.fn() } },
      }),
    },
    realtime: {
      removeAllChannels: vi.fn(),
    },
    rpc: vi.fn().mockResolvedValue({ data: null, error: null }),
  })
})

This call must be at the top level of the test file, outside of describe and beforeEach, because mockNuxtImport wraps vi.mock which Vitest hoists before imports.

If you need different return values per test, call vi.mocked inside the test after the top-level mock is in place:

it("handles error", async () => {
  vi.mocked(useSupabaseClient).mockReturnValue({
    auth: { onAuthStateChange: vi.fn() },
    rpc: vi.fn().mockResolvedValue({ data: null, error: new Error("fail") }),
  } as any)
  // rest of test
})

The as any cast is usually necessary since the full SupabaseClient type has many methods you are not mocking.