Angular Unit Test: Uncaught Error: Uncaught (in promise): Error: Cannot match any routes

Question

I am struggling with Angular Unit test on running "ng test", I get the below error in terminal.

ERROR: 'Unhandled Promise rejection:', 'Cannot match any routes. URL Segment: 'my-account'', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', Error: Cannot match any routes. URL Segment: 'my-account'
Error: Cannot match any routes. URL Segment: 'my-account'

ERROR: 'Unhandled Promise rejection:', 'Cannot match any routes. URL Segment: 'my-cards'', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', Error: Cannot match any routes. URL Segment: 'my-cards'
Error: Cannot match any routes. URL Segment: 'my-cards'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/router/fesm5/router.js:2469:1)

ERROR: 'Unhandled Promise rejection:', 'Cannot match any routes. URL Segment: 'add-beneficiary/manage-recurring-transfer'', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', Error: Cannot match any routes. URL Segment: 'add-beneficiary/manage-recurring-transfer'
Error: Cannot match any routes. URL Segment: 'add-beneficiary/manage-recurring-transfer'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/router/fesm5/router.js:2469:1)


ERROR: 'Unhandled Promise rejection:', 'Cannot match any routes. URL Segment: 'home'', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', Error: Cannot match any routes. URL Segment: 'home'
Error: Cannot match any routes. URL Segment: 'home'

The route files are as below-

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { OtpComponent } from './otp/otp.component';
import { AuthGuard } from './_guards/auth.guard'

const routes: Routes = [
  { path: '', loadChildren: './login/login.module#LoginModule' },
  {
    path: 'login',
    loadChildren: './login/login.module#LoginModule'
  },
  {
    path: 'forgot-password',
    loadChildren: './forgot-password/forgot-password.module#ForgotPasswordModule'
  },
  {
    path: 'home',
    loadChildren: './home/home.module#HomeModule', canActivate: [AuthGuard]
  },
  {
    path: 'my-account',
    loadChildren: './my-account/my-account.module#MyAccountModule', canActivate: [AuthGuard]
  },
  {
    path: 'account-setting',
    loadChildren: './account-setting/account-setting.module#AccountSettingModule', canActivate: [AuthGuard]
  },
  {
    path: 'create-account',
    loadChildren: './create-account/create-account.module#CreateAccountModule',
  },
  {
    path: 'my-cards',
    loadChildren: './my-cards/my-cards.module#MyCardsModule', canActivate: [AuthGuard]
  },
  {
    path: 'my-cards/:card_id',
    loadChildren: './my-cards/my-cards.module#MyCardsModule', canActivate: [AuthGuard]
  },
  {
    path: 'faq',
    loadChildren: './faq/faq.module#FaqModule'
  },
  {
    path: 'change-password',
    loadChildren: './change-password/change-password.module#ChangePasswordModule'
  },
  {
    path: 'add-beneficiary',
    loadChildren: './add-beneficiary/add-beneficiary.module#AddBeneficiaryModule', canActivate: [AuthGuard]
  },
  {
    path: 'give-feedback',
    loadChildren: './feedback/feedback.module#FeedbackModule', canActivate: [AuthGuard]
  },
  {
    path: 'my-profile',
    loadChildren: './my-profile/my-profile.module#MyProfileModule', canActivate: [AuthGuard]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true, onSameUrlNavigation: 'reload' })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { PolymerModule } from '@codebakery/origami';
import { AppComponent } from './app.component';

import { AuthGuard } from './_guards/auth.guard';
import { LoginModule } from './login/login.module';
import { SharedModule } from './shared/shared.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    PolymerModule,
    BrowserAnimationsModule,
    HttpClientModule,
    RouterModule,
    LoginModule,
    SharedModule,
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MbwHttpInterceptor,
      multi: true,
    },
    AuthGuard
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
  bootstrap: [AppComponent]
})
export class AppModule { }

Please help what did I missed or doing wrong in the above....

I had also tried multiple solutions from stackoverflow tried with RouterTestingModule.withRoutes[] within spec.ts file of component having the route,

Also tried changing routerLink="/home" to [routerLink]=['home'] this also didn't work, On running ng test the above error persists....

Answer 1

You must provide the route via RouterModule or RouterTestingModule.

RouterTestingModule.withRoutes(
      [
        {path: 'home', component: HomeComponent}
      ]
    )

If you only want it to recognize the route and not call the component, you can use "redirectTo":

{path: 'home', redirectTo: ''}