Как я могу проверить правильность рендеринга маршрутов Vue?

Как я могу протестировать реальную навигацию, которая происходит, когда пользователь нажимает на ссылку маршрутизатора? Например, я ожидаю, что связанный компонент будет отображаться, но изменится только маршрут, а отображаемый компонент не изменится.

В следующем фрагменте я полагаюсь на компонент, который включает в себя ссылку маршрутизатора на дорожка. См. прокомментированные строки, чтобы понять мое намерение:

      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!
})

Почему компонент не отображается при нажатии на ссылку? Навигация работает в реальности, т.е. когда я запускаю приложение нормально.

0 ответов

Другие вопросы по тегам