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.