Estoy tratando de probar un componente Vue con Vitest, pero para hacerlo necesito simular auth0
A continuación se muestra mi archivo Navbar.test.ts; sin embargo, cuando ejecuto la prueba, recibo el siguiente error Cannot read properties of undefined (reading 'mockReturnValue' como useAuth0 parece no estar definido aunque lo importé en la parte superior de la página Tal vez simplemente no estoy entendiendo muy bien el lado burlón, pero agradecería cualquier ayuda.
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()); });vi.mocked() es solo una ayuda para la compatibilidad con TypeScript. No se burla de nada.
Los siguientes cambios corrigen su prueba:
No use una importación con nombre del módulo en su prueba. En su lugar, importe todo el módulo.
Elimina vi.mocked() , ya que esto no tiene ningún efecto.
Usando la importación del paso 1, agregue una propiedad useAuth0 que se establece en una función simulada, devolviendo una simulación de loginWithRedirect .
// NavBar.spec.js import { describe, it, expect, vi } from 'vitest' import NavBar from '../NavBar.vue' import { shallowMount } from '@vue/test-utils' 1️⃣ // import { useAuth0 } from '@auth0/auth0-vue' // DON'T DO THIS import * as auth0 from '@auth0/auth0-vue' vi.mock('@auth0/auth0-vue') 2️⃣ // const mockedUseAuth0 = vi.mocked(useAuth0, true) describe('NavBar', () => { it('calls useAuth0 > loginWithRedirect', async () => { const loginWithRedirect = vi.fn() 3️⃣ auth0.useAuth0 = vi.fn().mockImplementation(() => ({ loginWithRedirect, })) const wrapper = shallowMount(NavBar) await wrapper.find('button').trigger('click') expect(auth0.useAuth0).toHaveBeenCalled() expect(loginWithRedirect).toHaveBeenCalled() }) })