Angular Unit Test using NgbDatepicker is failing

Issue

This seems pretty simple, and I'm sure I'm not importing something somewhere, but I've tried all the modules, including the test, and no luck. The test fails with this error:

There is no directive with "exportAs" set to "ngbDatepicker" (placeholder="a year ago" [(ngModel)]="fromDate" ngbDatepicker [ERROR->]#fromDateToggle="ngbDatepicker" title="Select a date">

I have a component template that uses the ng-bootstrap datepicker in a popup (as per their docs)

My template code looks like:

<div class="input-group">
  <input id="to-date" name="dp" class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="toDate"
    ngbDatepicker #toDateToggle="ngbDatepicker" title="Select a date">
  <button class="input-group-addon" (click)="toDateToggle.toggle()" type="button">
    <span class="fa fa-calendar"></span>
  </button>
</div>

I have NgbModule.forRoot() in app.module.ts and have imported NgbModule in my spec file, which seems to be all that the guide requires.

My spec file:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
import { By } from '@angular/platform-browser';
import { NgbModule, NgbActiveModal, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { ExtractModalComponent } from './extract-modal.component';

fdescribe('ExtractModalComponent', () => {
  let component: ExtractModalComponent;
  let fixture: ComponentFixture<ExtractModalComponent>;
  let debugEl: DebugElement;

  beforeEach(
    async(() => {
      TestBed.configureTestingModule({
        declarations: [ExtractModalComponent],
        providers: [NgbActiveModal],
        schemas: [NO_ERRORS_SCHEMA]
      }).compileComponents();
    })
  );

  beforeEach(() => {
    fixture = TestBed.createComponent(ExtractModalComponent);
    component = fixture.componentInstance;
    debugEl = fixture.debugElement.query(By.css('.modal-body'));
    fixture.detectChanges();
  });

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

Solution

"I have NgbModule.forRoot() in app.module.ts"

.... this is irrelevant to your tests. You need to do this in you spec file

e.g. imports:[NgbModule.forRoot()]

Worth noting that you don't have to import the full NgbModule i.e.: you could just import the NgbDatepickerModule ... but I'd get it working first before tinkering with this

Answered By - 72GM