Search code examples
angularkarma-jasmineng2-bootstrap

angular 2 unit test: There is no directive with "exportAs"

I've created a component that exports a bootstrap modal:

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.scss'],
  exportAs: 'modal'
})

And then on the parent component i consume it as follows: 

<app-modal #modalHandler="modal"></app-modal>

The issue is when i write a unit test for the parent component using NO_ERROR_SCHEMA, karma fails with the following error: 

There is no directive with "exportAs" set to "modal"

It resolves only after i import the modal component to the the parent component in TestBed.

Seems like NO_ERROR_SCHEMA doesn't silence this error. Anyway I can avoid this error without importing the child modal to my parents unit test?

Solution

  • It resolves only after i import the modal component to the the parent component in TestBed.

    It should be imported. Because in TestBed you just created a empty Module with your parent component. While doing this it try to compile and execute your parent template as well. There it is defied as 

    <app-modal #modalHandler="modal"></app-modal>

    So it will look for an object which is defined as export as modal.

    In test case since your module is empty and does not import that app-modal, so your parent template can not be initialized.

    So you need to

    import the modal component to the the parent component in TestBed

    This is how TestBed works. You need to import which is required you to test your component independently.

    Note:

    Generaly we use following line to create a testing module in spec fiel itself.

    TestBed.configureTestingModule({
});

    So it is not using that module in which your parent component exists. Rather it is creating a testing module in run-time.