Vue使用Vitest测试时如何正确mock Auth0解决useAuth0未定义报错

报错根因 #

vi.mock 会被Vitest自动提升到文件所有导入语句之前执行，你当前调用vi.mock("@auth0/auth0-vue")时没有传入自定义工厂函数，默认生成的mock模块不会还原原模块的导出结构，导致顶层导入的useAuth0值为undefined，后续对undefined调用mockReturnValue自然会抛出类型错误。

修复方案 #

给vi.mock传入工厂函数，显式声明useAuth0为mock函数，即可拿到正确的mock引用进行返回值配置，修复后的完整测试代码如下：

import { vi } from 'vitest'
import { ref } from "vue";
import { shallowMount } from '@vue/test-utils'
import { useAuth0 } from '@auth0/auth0-vue';
import NavBar from "@/components/NavBar.vue";

const testUser = {
    email: "user@test.com",
    email_verified: true,
    sub: ""
};

// 显式定义mock模块的导出内容
vi.mock("@auth0/auth0-vue", () => ({
  useAuth0: vi.fn()
}));

const mockedUseAuth0 = vi.mocked(useAuth0);

describe("NavBar.vue", () => {
    beforeEach(() => {
        mockedUseAuth0.mockReturnValue({
            isAuthenticated: ref(true),
            user: ref(testUser),
            logout: vi.fn(),
            loginWithRedirect: vi.fn(),
            isLoading: ref(false),
            // 按需补全NavBar组件实际用到的其他useAuth0返回属性
        } as ReturnType<typeof useAuth0>);
    });

    it("正常挂载", () => {
        const wrapper = shallowMount(NavBar, {
            props: {},
        });
        expect(wrapper).toBeTruthy();
    });

    afterEach(() => vi.clearAllMocks());
});

注意事项 #

• 原代码里的...是占位符，实际运行时必须删除，补全组件依赖的所有useAuth0返回字段，避免组件内部读取属性时报undefined
• TS环境下给mock返回值加as ReturnType<typeof useAuth0>类型断言，不需要手动维护完整的auth0类型定义
• 如果需要在vi.mock工厂函数内复用文件顶层的变量，变量名必须以mock开头（比如mockTestUser），否则会因为Vitest的mock提升机制触发变量未定义错误

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