How can I test Vue routes render right component?

149 Views Asked by At

How can I test the actual navigation that happens when a user clicks on a router link? E.g. I expect the linked component to be rendered but only the route changes, while the rendered component does not change.

In the following snippet, I rely on a Signup component which includes a router link to the /login path. See the commented lines to understand my intent:

test.only('navigates to login page when login btn is clicked', async () => {
    const TestLogin = {
        template: '<h1>Login page</h1>',
    }
    const routes = [{ path: '/login', name: 'Home', component: TestLogin }]
    const router = new VueRouter({ routes })
    localVue.use(VueRouter)
    const { getByText } = render(Signup, {
        localVue,
        router,
        vuetify,
    })
    const btn = getByText('go to login')
    await fireEvent.click(btn)
    expect(router.history.current.fullPath).toBe('/login')  <----- this passes
    await findByText('Login page')  <-------- this fails!
})

Why is the TestLogin component not rendered when the link is clicked? The navigation works in actuality, i.e. when I run the application normally.

0

There are 0 best solutions below