Vitests报错：useSupabaseUser未定义，如何解决？

问题原因 #

Vitest运行在独立于Nuxt的测试环境中，@nuxtjs/supabase提供的useSupabaseUser和useSupabaseClient是Nuxt框架自动注入的composables，测试时没有Nuxt上下文支撑，导致这些方法无法被识别。

解决方案 #

方案1：手动模拟Supabase Composables #

在测试文件中直接模拟这两个方法，让Pinia store能正常获取到所需返回值：

修改你的测试文件：

import { describe, it, vi, beforeEach } from 'vitest';
import { shallowMount, VueWrapper } from '@vue/test-utils';
import { setActivePinia, createPinia } from 'pinia';
import { ref } from 'vue';

import DefaultMobileHeader from '@/components/organism/DefaultMobileHeader.vue';

// 模拟Nuxt自动注入的Supabase composables
vi.mock('#imports', () => ({
  // 模拟useSupabaseUser返回ref，可根据测试需求设置初始值（比如null或模拟用户对象）
  useSupabaseUser: vi.fn(() => ref(null)),
  // 模拟useSupabaseClient返回包含所需方法的对象，根据store实际调用的方法补充
  useSupabaseClient: vi.fn(() => ({
    auth: {
      signOut: vi.fn()
      // 补充你的store用到的其他Supabase方法
    }
  }))
}));

describe('DefaultMobileHeader.vue', () => {
  let wrapper: VueWrapper;

  beforeAll(() => {
    setActivePinia(createPinia());
  });

  beforeEach(() => {
    wrapper = shallowMount(DefaultMobileHeader);
  });

  it('render component', () => {
    expect(wrapper.element).toMatchSnapshot();
  });
});

方案2：使用Nuxt测试工具搭建完整环境 #

如果需要更贴近真实Nuxt环境的测试，可以使用@nuxt/test-utils自动处理Nuxt上下文注入：

1. 安装依赖：

npm install -D @nuxt/test-utils

2. 修改测试文件：

import { describe, it, beforeEach, beforeAll } from 'vitest';
import { mount, VueWrapper } from '@vue/test-utils';
import { setActivePinia, createPinia } from 'pinia';
import { setup } from '@nuxt/test-utils';

import DefaultMobileHeader from '@/components/organism/DefaultMobileHeader.vue';

describe('DefaultMobileHeader.vue', () => {
  let wrapper: VueWrapper;

  beforeAll(async () => {
    // 初始化Nuxt测试环境
    await setup({
      server: true,
      nuxtConfig: {
        modules: ['@nuxtjs/supabase']
      }
    });
    setActivePinia(createPinia());
  });

  beforeEach(() => {
    wrapper = mount(DefaultMobileHeader);
  });

  it('render component', () => {
    expect(wrapper.element).toMatchSnapshot();
  });
});

注意事项 #

• 如果你的store中调用了Supabase client的具体方法（比如signOut、updateUser等），需要在模拟对象中补充对应的mock函数，避免测试时出现新的错误。
• 方案1适合快速单元测试，方案2适合需要完整Nuxt上下文的集成测试。

内容的提问来源于stack exchange，提问作者Dominik Grabiec