testing a vue3 component with with jest

Question

I got this test from another site. They are injecting a mock route. I think I need to mock router itself or pass a real one into the test so the page can run. There is a way to do this in vue 2, but I haven't found an example for vue 3.

import { mount } from "@vue/test-utils";
import Nav from "./Nav.vue";

test("it displays a menu item", () => {
    const mockRoute = {
        params: {
           id: 1,
        },
    };
    const mockRouter = {
        push: jest.fn(),
    };

    const wrapper = mount(Nav, {
        props: {
            isAuthenticated: true,
        },
        global: {
            mocks: {
                $route: mockRoute,
                $router: mockRouter,
            },
        },
    });

    expect(wrapper.find("#navLabel_0").text()).toEqual("Appointments");
});

The component I'm testing has tags.

The test fails with:

Failed to resolve component: router-link

score 1 · Answer 1 · answered Jun 02 '22 at 10:30

You have to pass the router-link as a stub: stubs: ['router-link'] when you mount the component:

const wrapper = mount(Nav, {
        props: {
            isAuthenticated: true,
        },
        global: {
            mocks: {
                $route: mockRoute,
                $router: mockRouter,
            },
        },
        stubs: ['router-link']    });

testing a vue3 component with with jest

1 Answers1