Failed: Template parse errors: There is no directive with “exportAs” set to “bsDatepicker” while running unit test

Question

I have angular SPA application which has calendar control from ngx-bootstrap.I am importing the BsDatepickerModule.forRoot() from ngx-bootstrap in NgModule imports declaration which is imported from BsDatepickerModule. Now I have a component which contains few fields as the date calendar controls, when I run the unit tests on this component using karma-jasmine, all the tests are passing except for this component and the error says:

MyTestComponent > should create Failed: Template parse errors: There is no directive with "exportAs" set to "bsDatepicker"

I have tried following:
1. Added "FormModule" to the imports of the testbed under "beforeEach"
2. Deleted node_modules folder and ran npm install again

html file code:

<input class="form-control" placeholder="yyyy-mm-dd" formControlName="testDateOfBirth"
[ngClass]="{ 'is-invalid': displayMessage.testDateOfBirth }" bsDatepicker #dp="bsDatepicker">

spec.ts file:

import { FormsModule } from '@angular/forms';
describe('MyTestComponent', () => {
  let component: MyTestComponent;
  let fixture: ComponentFixture<MyTestComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports:[FormsModule],
      declarations: [ MyTestComponent],
      schemas:[NO_ERRORS_SCHEMA],
    })
    .compileComponents();
  }));

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

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

expected: the test "should create" should pass
actual: I am seeing this error:

MyTestComponent> should create Failed: Template parse errors: There is no directive with "exportAs" set to "bsDatepicker" ("teOfBirth" [ngClass]="{ 'is-invalid': displayMessage.testDateOfBirth }" bsDatepicker [ERROR ->]#dp="bsDatepicker">

html code as requested:

 id="wrap" class="container">
  <div class="col-md-12 col-lg-6">
    <h1>{{pageTitle}}</h1>
    <form novalidate (ngSubmit)="save()" [formGroup]="testForm">

      <div class="form-group">
        <label class="form-label required " for="EightDigitNumberId">
          What is your eightdigitNumber?
        </label>
        <input class="form-control " id="EightDigitNumberId" type="text"
          formControlName="EightDigitNumber" [ngClass]="{ 'is-invalid': displayMessage.EightDigitNumber }" mask='99999999' />
        <span class="invalid-message">{{ displayMessage.EightDigitNumber }}</span>
      </div>

      <div class="form-group">
        <label class="form-label required " for="firstNameId">
           First Name:
        </label>
        <input class="form-control " id="firstNameId" type="text" placeholder="First Name"
          formControlName="firstName" [ngClass]="{ 'is-invalid': displayMessage.firstName }" />
        <span class="invalid-message">{{ displayMessage.firstName }}</span>
      </div>

      <div class="form-group">
        <label class="form-label required " for="lastNameId">
           Last Name:
        </label>
        <input class="form-control " id="lastNameId" type="text" placeholder="last Name"
          formControlName="lastName" [ngClass]="{ 'is-invalid': displayMessage.lastName }" />
        <span class="invalid-message">{{ displayMessage.lastName }}</span>
      </div>

      <div class="form-group">
        <label class="form-label required " for="DateOfBirthId">
           Date of Birth:
        </label>
        <div class="input-group">
          <!-- 
              To add more options:
                [outsideClick]="true"
                [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD', containerClass: 'theme-orange'}" 
            -->

          <input class="form-control" placeholder="yyyy-mm-dd" formControlName="DateOfBirth"
            [ngClass]="{ 'is-invalid': displayMessage.DateOfBirth }" bsDatepicker #dp="bsDatepicker">
          <div class="input-group-append">
            <button class=" fa fa-calendar" (click)="dp.toggle()" type="button"></button>
          </div>
        </div>
        <span class="invalid-message">{{ displayMessage.DateOfBirth }}</span>
      </div>

      <div class="form-group">
        <button class="btn btn-primary" type="submit" [title]="
            testForm.valid
              ? 'Save your entered data'
              : 'Disabled until the form data is valid'
          " [disabled]="!testForm.valid">
          Submit
        </button>


      </div>
    </form>

    <div class="alert alert-danger" *ngIf="errorMessage">{{errorMessage}}
    </div>
  </div>
</main>

driding driding · Accepted Answer · 2019-09-12T17:16:06

I know I'm late to the game, but for those who are looking for an answer to this... I had the exact issue with with BsDropdownModule. <span #cartDropdown="bs-dropdown" dropdown">...<span>

Just as ysf mentioned above, I added the BsDropdownModule to the TestBed imports, but had to add a .forRoot() after it just as the ngx-bootstrap documents tell you to do in the app.module.

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports:[BsDropdownModule.forRoot(), ...],
      declarations: [ MyTestComponent],
      schemas:[NO_ERRORS_SCHEMA],
    })
    .compileComponents();
  }));

Failed: Template parse errors: There is no directive with “exportAs” set to “bsDatepicker” while running unit test

3 Answers