Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

123
Views
How can I test Vue routes render right component?

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.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!