title: Expected null to be truthy. Jasmine / Karma
body: <p>I'm trying to test my component injected into a mock class I created. Although the component works when I try to test its existence it returns null.</p>
  
  <p>Injectable Component: </p>
  
  <pre><code>import { Injectable, ElementRef, Renderer2, RendererFactory2 } from '@angular/core';
  
  @Injectable()
  export class NgBackdropComponent {
    private renderer: Renderer2;
    private appElementRef: ElementRef;
  
    message: string = 'Carregando...';
  
    constructor(rendererFactory: RendererFactory2) {
      this.renderer = rendererFactory.createRenderer(null, null);
      this.appElementRef = new ElementRef(&lt;Element&gt;document.getElementsByTagName('body').item(0));
    }
  
    show() {
      const divSpinnerItem1 = this.renderer.createElement('i');
      const divSpinnerItem2 = this.renderer.createElement('i');
      const divSpinnerItem3 = this.renderer.createElement('i');
      const divSpinner = this.renderer.createElement('div');
      this.renderer.addClass(divSpinner, 'spinner');
      this.renderer.appendChild(divSpinner, divSpinnerItem1);
      this.renderer.appendChild(divSpinner, divSpinnerItem2);
      this.renderer.appendChild(divSpinner, divSpinnerItem3);
  
      const spanMensagem = this.renderer.createElement('span');
      spanMensagem.innerHTML = this.message;
  
      const div = this.renderer.createElement('div');
      this.renderer.addClass(div, 'lock-content');
      this.renderer.appendChild(div, divSpinner);
      this.renderer.appendChild(div, spanMensagem);
  
      this.renderer.appendChild(this.appElementRef.nativeElement, div);
    }
  
    hide() {
      const elemento = this.appElementRef.nativeElement.querySelector('.lock-content');
      if (elemento) {
        elemento.remove();
      }
    }
  }
  </code></pre>
  
  <p>my testing environment: </p>
  
  <pre><code>import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  
  import { NgBackdropComponent } from './ng-backdrop.component';
  import { Component } from '@angular/core';
  import { By } from '@angular/platform-browser';
  
  
  @Component({
    template: `
      &lt;button (click)="clickButton()"&gt;&lt;/button&gt;
      `
  })
  class MockNgBackdropComponent {
    constructor(private backdrop: NgBackdropComponent) { }
  
    clickButton() {
      this.backdrop.message = 'Teste BackDrop aesdas';
      this.backdrop.show();
      console.log('iniciei backdrop');
    }
  
    closeBackdrop() {
      this.backdrop.hide();
    }
  }
  
  describe('NgBackdropComponent', () =&gt; {
    let component: MockNgBackdropComponent;
    let fixture: ComponentFixture&lt;MockNgBackdropComponent&gt;;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [MockNgBackdropComponent],
        providers: [NgBackdropComponent]
      })
        .compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(MockNgBackdropComponent);
      component = fixture.componentInstance;
    });
  
    describe('Deve injetar', async () =&gt; {
  
      it('Deve ter uma div principal', function () {
        const btnClick = fixture.nativeElement.querySelector('button');
        btnClick.click();
        fixture.detectChanges();
  
        const el = fixture.nativeElement.querySelector('.lock-content');
        console.log(el);
  
        expect(el).toBeTruthy();
      });
    });
  });
  </code></pre>
  
  <p>In testing I create a Mock class where I inject my component.
  I do not understand why it can not find the class because it exists.</p>