How to write unit test for Ionic 4 when the component has child routes?

failing-unit-test.md

Failing test log

ClientsPage should create FAILED
        Error: StaticInjectorError(DynamicTestModule)[IonRouterOutlet -> ChildrenOutletContexts]:
          StaticInjectorError(Platform: core)[IonRouterOutlet -> ChildrenOutletContexts]:
            NullInjectorError: No provider for ChildrenOutletContexts!
            at NullInjector.get (webpack:///./node_modules/@angular/core/fesm5/core.js?:1360:19)
            at resolveToken (webpack:///./node_modules/@angular/core/fesm5/core.js?:1598:24)
            at tryResolveToken (webpack:///./node_modules/@angular/core/fesm5/core.js?:1542:16)
            at StaticInjector.get (webpack:///./node_modules/@angular/core/fesm5/core.js?:1439:20)
            at resolveToken (webpack:///./node_modules/@angular/core/fesm5/core.js?:1598:24)
            at tryResolveToken (webpack:///./node_modules/@angular/core/fesm5/core.js?:1542:16)
            at StaticInjector.get (webpack:///./node_modules/@angular/core/fesm5/core.js?:1439:20)
            at resolveNgModuleDep (webpack:///./node_modules/@angular/core/fesm5/core.js?:8667:29)
            at NgModuleRef_.get (webpack:///./node_modules/@angular/core/fesm5/core.js?:9355:16)
            at resolveDep (webpack:///./node_modules/@angular/core/fesm5/core.js?:9720:45)

Spec file

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ClientsPage } from './clients.page';
import { MenuController, IonicModule } from '@ionic/angular';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

describe('ClientsPage', () => {
  let component: ClientsPage;
  let fixture: ComponentFixture<ClientsPage>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ClientsPage],
      providers: [{ provide: MenuController, useValue: {} }],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      imports: [IonicModule]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ClientsPage);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Component

import { Component, OnInit } from '@angular/core';
import { MenuController } from '@ionic/angular';

@Component({
  selector: 'app-clients',
  templateUrl: './clients.page.html',
  styleUrls: ['./clients.page.scss']
})
export class ClientsPage implements OnInit {
  constructor(public menuController: MenuController) {}

  ngOnInit() {}
}

Component Template

<ion-header>
  <ion-toolbar color="dark">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title> Clients </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content margin-top> 
  <ion-router-outlet></ion-router-outlet> 
</ion-content>

Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ClientListComponent } from './client-list/client-list.component';
import { ClientDetailComponent } from './client-detail/client-detail.component';
import { ClientsPage } from './clients.page';
import { RouterModule, Route } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { AdminClientService } from './admin-client.service';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild([
      {
        path: '',
        component: ClientsPage,
        children: [
          {
            path: '',
            component: ClientListComponent
          },
          {
            path: ':id',
            component: ClientDetailComponent
          }
        ]
      }
    ])
  ],
  declarations: [ClientsPage, ClientListComponent, ClientDetailComponent],
  providers: [AdminClientService]
})
export class ClientsModule {}

I have the same problem