I am trying to test a Vue component with Vitest but in order to do that I need to mock auth0
Below is my Navbar.test.ts file, however when I run the test I keep getting the following error Cannot read properties of undefined (reading 'mockReturnValue'
as useAuth0
seems to be undefined even though I am imported it at the top of the page. Maybe I'm just not understanding the mocking side of it very well but any help would be appreciated.
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());
});
from Vue: How to mock Auth0 for testing with Vitest
No comments:
Post a Comment