Ng test Error: NullInjectorError: No provider for IonRouterOutlet!

I am getting an error in the default “should create” tests for a page when adding “IonRouterOutlet” to the page constructor to use in a modal presentation.

Error Message

Chrome 86.0.4240.193 (Mac OS 11.0.0) CustomPage should create FAILED
Failed: R3InjectorError(DynamicTestModule)[IonRouterOutlet -> IonRouterOutlet]:
NullInjectorError: No provider for IonRouterOutlet!

I have tried importing and adding IonRouterOutlet to the page providers in custom-page.page.spec.ts but that results in another error. Can anyone help explain the dependency mistake I am making? Still trying to understand Angular’s dependency system. Thanks!

Custom Page Constructor

constructor(private authService: AuthService, private formBuilder: FormBuilder, private modalController: ModalController, private customService: CustomService, private routerOutlet: IonRouterOutlet) {}

Modal Presentation (func in custom page)

async presentModal(param) {
    const modal = await this.modalController.create({
      component: AddItemModalComponent,
      componentProps: {
        'param': param
      },
      presentingElement: this.routerOutlet.nativeEl,
      swipeToClose: true
    });
    return await modal.present();
  }

custom-page.page.spec.ts

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ CustomPage ],
      imports: [
        FormsModule,
        IonicModule.forRoot(),
        ReactiveFormsModule,
        RouterTestingModule
      ]
    }).compileComponents();

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

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

1 post - 1 participant

Read full topic