Vue：如何模拟 Auth0 以使用 Vitest 进行测试

Question

我正在尝试使用 Vitest 测试 Vue 组件，但为了做到这一点，我需要模拟 auth0

下面是我的 Navbar.test.ts 文件，但是当我运行测试时，我不断收到以下错误，Cannot read properties of undefined (reading 'mockReturnValue'似乎useAuth0未定义，即使我将其导入到页面顶部。也许我只是不太理解它的嘲笑的一面，但任何帮助将不胜感激。

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 user = {
    email: "user@test.com",
    email_verified: true,
    sub: ""
};

vi.mock("@auth0/auth0-vue");

const mockedUseAuth0 = vi.mocked(useAuth0, true);

describe("NavBar.vue", () => {
    beforeEach(() => {
        mockedUseAuth0.mockReturnValue({
            isAuthenticated: ref(true),
            user: ref(user),
            logout: vi.fn(),
            loginWithRedirect: vi.fn(),
            ...
            isLoading: ref(false),
        });
    });

    it("mounts", () => {
        const wrapper = shallowMount(NavBar, {
            props: { },
        });

        expect(wrapper).toBeTruthy();
    });

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

Answer 1

嘲笑auth0.useAuth0

\n

要访问模拟模块，请使用通配符导入来导入整个模块，并避免命名导入。另外，vi.mocked()它只是 TypeScript 支持的助手。它不嘲笑任何东西。

\n

所以代替这个：

\n

import { useAuth0 } from \'@auth0/auth0-vue\' \xe2\x9d\x8c\n\nvi.mock(\'@auth0/auth0-vue\')\nconst mockedUseAuth0 = vi.mocked(useAuth0, true) \xe2\x9d\x8c\n

\n

...做这个：

\n

import * as auth0 from \'@auth0/auth0-vue\' \xe2\x9c\x85\n\nvi.mock(\'@auth0/auth0-vue\')\n

\n

然后，useAuth0通过将属性直接附加到模拟对象来进行模拟auth0导入来进行模拟：

\n

describe(\'NavBar.vue\', () => {\n  it(\'does something\', async () => {\n                      \n    (auth0 as any).useAuth0 = vi.fn().mockReturnValue({\n      // relevant fields for test\n    });\n  })\n})\n

\n

的值useAuth0应该是一个模拟函数 ( vi.fn())，它返回与测试相关的字段。假设被测组件NavBar.vue来自 Auth0 的示例应用程序，可以编写一个测试来验证登录按钮调用loginWithRedirect。该按钮仅在和为 false时isAuthenticatedisLoading可用。注意字段不需要是Vueref。

\n

所以这样的测试可能如下所示：

\n

describe(\'NavBar.vue\', () => {\n  it(\'login button invokes useAuth.loginWithRedirect\', async () => {\n    const loginWithRedirect = vi.fn();\n    (auth0 as any).useAuth0 = vi.fn().mockReturnValue({\n      isAuthenticated: false,\n      isLoading: false,\n      loginWithRedirect,\n    });\n\n    const wrapper = shallowMount(NavBar);\n    await wrapper.find(\'button#qsLoginBtn\').trigger(\'click\');\n\n    expect(auth0.useAuth0).toHaveBeenCalled();\n    expect(loginWithRedirect).toHaveBeenCalled();\n  })\n})\n

\n

嘲笑useAuth().user

\n

人们还可以编写一个测试来验证经过身份验证的用户的详细信息是否显示在组件中。具体来说，当为true 时，用户的姓名显示在 中.user-info，用户的图片显示在 中.user-info imgisAuthenticated。因此，被嘲笑的人useAuth0应该返回isAuthenticated并user如下所示：

\n

describe(\'NavBar\', () => {\n  it(\'authenticated user details are shown\', async () => {\n    const user = {\n      name: \'john@gmail.com\',\n      picture: \'https://s.gravatar.com/avatar/1f9d9a9efc2f523b2f09629444632b5c?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fjo.png\',\n    };\n\n    (auth0 as any).useAuth0 = vi.fn().mockReturnValue({\n      isAuthenticated: true,\n      user,\n    });\n\n    const wrapper = shallowMount(NavBar);\n\n    expect(wrapper.find(\'.user-info\').text()).toBe(user.name);\n    expect(wrapper.find(\'.user-info img\').attributes(\'src\')).toBe(user.picture);\n  })\n})\n

\n

演示

\n