diff --git a/__tests__/guards/extractComponentsGuards.spec.ts b/__tests__/guards/extractComponentsGuards.spec.ts index 7301ea47d..7dadb979b 100644 --- a/__tests__/guards/extractComponentsGuards.spec.ts +++ b/__tests__/guards/extractComponentsGuards.spec.ts @@ -33,6 +33,10 @@ const SingleGuardNamed: RouteRecordRaw = { other: { ...components.Foo, beforeRouteEnter }, }, } +const ErrorLazyLoad: RouteRecordRaw = { + path: '/', + component: () => Promise.reject(new Error('custom')), +} beforeEach(() => { beforeRouteEnter.mockReset() @@ -96,4 +100,11 @@ describe('extractComponentsGuards', () => { await checkGuards([WrongLazyRoute], 0, 1) expect('Promise instead of a function').toHaveBeenWarned() }) + + it('rejects if lazy load fails', async () => { + await expect(checkGuards([ErrorLazyLoad], 0, 1)).rejects.toHaveProperty( + 'message', + 'custom' + ) + }) }) diff --git a/__tests__/lazyLoading.spec.ts b/__tests__/lazyLoading.spec.ts index 54bfffe8e..9c95a33a5 100644 --- a/__tests__/lazyLoading.spec.ts +++ b/__tests__/lazyLoading.spec.ts @@ -264,7 +264,7 @@ describe('Lazy Loading', () => { await router.push('/foo').catch(spy) expect(spy).toHaveBeenCalled() - expect(console.error).toHaveBeenCalledWith(error) + expect(spy).toHaveBeenLastCalledWith(error) expect(router.currentRoute.value).toMatchObject({ path: '/', @@ -307,10 +307,11 @@ describe('Lazy Loading', () => { const spy = jest.fn() parent.resolve() - child.reject() + const error = new Error() + child.reject(error) await router.push('/foo').catch(spy) - expect(spy).toHaveBeenCalledWith(expect.any(Error)) + expect(spy).toHaveBeenCalledWith(error) expect(router.currentRoute.value).toMatchObject({ path: '/', diff --git a/src/navigationGuards.ts b/src/navigationGuards.ts index 185a22f21..9b6de9476 100644 --- a/src/navigationGuards.ts +++ b/src/navigationGuards.ts @@ -296,9 +296,6 @@ export function extractComponentsGuards( `Component "${name}" in record with path "${record.path}" is a function that does not return a Promise. If you were passing a functional component, make sure to add a "displayName" to the component. This will break in production if not fixed.` ) componentPromise = Promise.resolve(componentPromise as RouteComponent) - } else { - // display the error if any - componentPromise = componentPromise.catch(console.error) } guards.push(() =>