Ionic 5 Unit Tests with routerLink

Ionic Framework Ionic Angular
1

I’m developing an Ionic 5 App. I was testing a component like this:

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [HomePage],
      imports: [MocksModule, IonicModule.forRoot()]
    }).compileComponents();

    fixture = TestBed.createComponent(HomePage);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

It was working fine but after I added:

<ion-button routerLink="/settings">
    <ion-icon slot="icon-only" name="settings-outline"></ion-icon>
 </ion-button>

The test fails with:

Failed: R3InjectorError(DynamicTestModule)[NavController -> UrlSerializer -> UrlSerializer]: 
  NullInjectorError: No provider for UrlSerializer!

In MocksModule I export a stub directive as recommended in the Angular docs I believe the error is related to the implementation of RouterLink inside IonicModule.

2

You just need to add RouterTestingModule to your test providers array.

3

I had to add it to my imports array instead of providers, but this was the solution, thanks!

3 Likes