Replies: 1 comment 1 reply
-
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
If you use nested routes, you would of cause need to recurs any dynamically loaded components there too. Good luck! |
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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:
router-link
with vue-test-utils'trigger('click')
fullPath
Expected behavior
The route
fullPath
after clicking therouter-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 therouter-link
causes a correct routerbeforeEach
event but noafterEach
event.This problem is not reproducible if:
import AboutView from "@/views/AboutView.vue";
instead of the dynamic importrouter.push('/about')
is called instead of clicking the router linkflushPromises()
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?
Beta Was this translation helpful? Give feedback.
All reactions