Routing will not finish when clicking on router-link and the target route component is imported dynamically

[BeniRupp]

Reproduction

https://github.com/BeniRupp/vue-router-async-import-bug

Steps to reproduce the bug

In a vitest test having a router with two routes, a component with a router-link and dynamic component imports for the route components:

1. setup router in the test
2. mount a component with a router link
3. click on that router-link with vue-test-utils' trigger('click')
4. wait for the route change
5. expect the new route fullPath

const AboutView =  () => import("@/views/AboutView.vue")
// ...

it('should work', async () => {
    const router = createRouter({
        history: createWebHistory(),
        routes: [
            {path: '/', component: HomeView},
            {path: '/about', component: AboutView},
        ],
    })
    await router.push('/')
    await router.isReady()

    const wrapper = mount(
        { template: '<router-link class="link" to="/about">test</router-link>', },
        { global: { plugins: [router] }}
    )

    expect(router.currentRoute.value.fullPath).toBe('/')
    await wrapper.find('.link').trigger('click')
    await flushPromises()
    expect(router.currentRoute.value.fullPath).toBe('/about')
})

Expected behavior

The route fullPath after clicking the router-link is /about instead of /.

Actual behavior

The route fullPath is still /.

Additional information

I assume that the test will finish before the import resolves, because the router changes the route, calls the import function, but the import() statement does not resolve (see reproduction repo). Furhtermore, the click on the router-link causes a correct router beforeEach event but no afterEach event.

This problem is not reproducible if:

• ... using import AboutView from "@/views/AboutView.vue"; instead of the dynamic import
• ... router.push('/about') is called instead of clicking the router link
• ... when a delay of 1000ms is added after the flushPromises() call (see: Routing will not finish when clicking on router-link and the target route component is imported dynamically vuejs/router#2108)

Am I doing something wrong or is there a better way to wait until the async import was resolved and the route changed?

[telimbectar]

Hi!

I import my routes from a routes.js file, containing mostly dynamic routes, and ran into the same problem.

All components are pending while vitest does it's thing, await flushPromises() or await router.isReady() won't help. So I forced them to resolve in a beforeAll, like

import { createRouter, createWebHistory } from 'vue-router'
import routes from "@/router/routes" 

const router = createRouter({
  history: createWebHistory(),
  routes
})

describe('MyComponent.vue', () => {

  beforeAll(async () => {
    for await (const route of router.options.routes) {
      if (typeof route.component == 'function') {
        await route.component()
      }
    }    
  })

If you use nested routes, you would of cause need to recurs any dynamically loaded components there too.

Good luck!

[sheremet-va]

All components are pending while vitest does it's thing, await flushPromises() or await router.isReady() won't help.

You can call vi.dynamicImportSettled() to wait for any dynamic import that is currently pending

[BeniRupp]

Hi @sheremet-va,
now I've had the time to test your suggestion, and it works like a charm! Thanks for the pointer to this function. 🎉 ❤️

Here is the link to the part of the vitest documentation: https://vitest.dev/api/vi.html#vi-dynamicimportsettled