Closed calebbergman closed 3 years ago
Hi! Since the navigation now requires the component to load dynamically, you need to wait until the change has indeed happened. Following is a passing test:
it('Should navigate to /about, a dynamic route, when the link is clicked', async () => {
render(Component, {
routes: [ // unrelated, but you can use the `routes` option to create a vue router instead of using the vue instance
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/about',
component: () => import('./components/Router/About.vue'),
},
],
})
const route = screen.getByTestId('route')
expect(route.textContent).toBe('/')
const link = screen.getByText('About')
await fireEvent.click(link)
// wait until route.textContent has changed
await waitFor(() => expect(route.textContent).toBe('/about'))
})
Hey! π
That definitely makes sense and fixes the problem in my contrived demo.
I originally had run across this issue in production code. Coming back to it after having some vacation time, I think I discovered my issue was compounded by a couple of other mistakes of mine:
component
to the route altogether that I was testing π€¦ββοΈrender(Home)
) for which said component was the component for the route ( { path: '/Home', component: Home }
), instead of its containing component (i.e. App.vue) that has the <router-view />
tag...if that makes sense.After moving the data-testid=route
div to App.vue
and the test to App.spec.ts
(from Home.vue
and Home.spec.ts
) , I was able to get the test to pass using await waitFor()
.
I am still having issues getting to render what I'm expecting via routing, but that's not related to this issue of dynamic routing, so this can be closed π
Thanks so much @afontcu!
While moving stuff around in my production tests I realized I had written const router = new VueRouter(routes)
instead of const router = new VueRouter({ routes })
, wrapping routes
in an options object (οΌβΈα) Rending the route components works great now, go figure π
Vacation time does always help! π Glad to hear you worked it out.
Describe the bug Navigation fails to occur when attempting to navigate to a dynamic route.
This issue may be related to Issue 130, the difference here being I'm not trying to set the initial route, but trying to perform the route navigation by clicking a link present on the page.
To Reproduce Steps to reproduce the behavior: Demo
The test β fails if the route is dynamic. The test β passes if the route is static.
Expected behavior β Test passes
Actual behavior β Test fails
@testing-library/vue
version: 5.6.1Vue
version: 2.6.11Vue Router
version: 3.2.0node
version: 12.16.1npm
version: 6.14.6Additional context Original issue reported on Discord