0

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.

4
  • Could it be that your TestLogin must be created with Vue.component(....)? Commented Mar 21, 2022 at 12:33
  • @jkoch Thanks for the suggestion. It didn't make any difference tho. Commented Mar 21, 2022 at 13:38
  • Have you tried to use getByText instead of findByText? Commented Mar 21, 2022 at 13:53
  • @jkoch Did you try that? getByText will return immediately, as opposed to findByText which returns a Promise. It does not make any difference. Commented Mar 21, 2022 at 16:46

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.