javascript - structural - unit testing angular 2 components

How to Unit Test a Directive In Angular 2? (2)

Testing compiled directive using TestBed

Let's say you have a following directive:

  selector: '[my-directive]',
class MyDirective {
  public directiveProperty = 'hi!';

What you have to do, is to create a component that uses the directive (it can be just for testing purpose):

  selector: 'my-test-component',
  template: ''
class TestComponent {}

Now you need to create a module that has them declared:

describe('App', () => {

  beforeEach(() => {
      declarations: [

  // ...


You can add the template (that contains directive) to the component, but it can be handled dynamically by overwriting the template in test:

it('should be able to test directive', async(() => {
  TestBed.overrideComponent(TestComponent, {
    set: {
      template: '<div my-directive></div>'

  // ...      


Now you can try to compile the component, and query it using By.directive. At the very end, there is a possibility to get a directive instance using the injector:

TestBed.compileComponents().then(() => {
  const fixture = TestBed.createComponent(TestComponent);
  const directiveEl = fixture.debugElement.query(By.directive(MyDirective));

  const directiveInstance = directiveEl.injector.get(MyDirective);

# Old answer:

To test a directive you need to create a fake component with it:

  selector: 'test-cmp',
  directives: [MyAttrDirective],
  template: ''
class TestComponent {}

You can add the template in the component itself but it can be handled dynamically by overwriting the template in test:

it('Should setup with conversation', inject([TestComponentBuilder], (testComponentBuilder: TestComponentBuilder) => {
    return testComponentBuilder
      .overrideTemplate(TestComponent, `<div my-attr-directive></div>`)
      .then((fixture: ComponentFixture<TestComponent>) => {
        const directiveEl = fixture.debugElement.query(By.css('[my-attr-directive]'));

Note that you're able to test what directive renders but I couldn't find the way to test a directive in a way components are (there is no TestComponentBuilder for directives).

Problem: I would like to be able to unit test a directive in Angular 2 to make sure that it properly compiles.

In Angular 1, it was possible to use$compile(angular.element(myElement) service and call $scope.$digest() after that. I specifically want to be able to do this in unit tests so I could test that when Angular ends up running across <div my-attr-directive/> in the code that my-attr-directive compiles.


Took me a while to find a good example, a good person on angular gitter channel pointed me to look at the Angular Material Design 2 repository for examples. You can find a Directive test example here. This is the test file for the tooltip directive of Material Design 2. It looks like you have to test it as part of a component.