javascript - 视觉 : How to mock Auth0 for testing with Vitest

Question

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

下面是我的 Navbar.test.ts 文件，但是当我运行测试时，我不断收到以下错误 Cannot read properties of undefined (reading 'mockReturnValue' as 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

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

所以不是这个:

import { useAuth0 } from '@auth0/auth0-vue' ❌

vi.mock('@auth0/auth0-vue')
const mockedUseAuth0 = vi.mocked(useAuth0, true) ❌

...这样做:

import * as auth0 from '@auth0/auth0-vue' ✅

vi.mock('@auth0/auth0-vue')

然后，通过将属性直接附加到模拟的 auth0 导入来模拟 useAuth0:

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

useAuth0 的值应该是 vi.fn() 的模拟函数 ( returns )与测试相关的字段。假设被测组件是 NavBar.vue from Auth0's sample app ，可以编写一个测试来验证登录按钮是否调用了 loginWithRedirect。该按钮仅可用 when isAuthenticated and isLoading are false .请注意，这些字段不需要是 Vue ref。

所以这样的测试看起来像这样:

describe('NavBar.vue', () => {
  it('login button invokes useAuth.loginWithRedirect', async () => {
    const loginWithRedirect = vi.fn();
    (auth0 as any).useAuth0 = vi.fn().mockReturnValue({
      isAuthenticated: false,
      isLoading: false,
      loginWithRedirect,
    });

    const wrapper = shallowMount(NavBar);
    await wrapper.find('button#qsLoginBtn').trigger('click');

    expect(auth0.useAuth0).toHaveBeenCalled();
    expect(loginWithRedirect).toHaveBeenCalled();
  })
})

模拟 useAuth().user

还可以编写一个测试来验证经过身份验证的用户的详细信息是否显示在组件中。具体来说，user's name is shown in .user-info , 和 user's picture is shown in .user-info img当 isAuthenticated 为真时。因此，模拟的 useAuth0 应该返回 isAuthenticated 和 user，如下所示:

describe('NavBar', () => {
  it('authenticated user details are shown', async () => {
    const user = {
      name: 'john@gmail.com',
      picture: 'https://s.gravatar.com/avatar/1f9d9a9efc2f523b2f09629444632b5c?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fjo.png',
    };

    (auth0 as any).useAuth0 = vi.fn().mockReturnValue({
      isAuthenticated: true,
      user,
    });

    const wrapper = shallowMount(NavBar);

    expect(wrapper.find('.user-info').text()).toBe(user.name);
    expect(wrapper.find('.user-info img').attributes('src')).toBe(user.picture);
  })
})

demo