title: expect(component).toBeTruthy() fails
body: <p>I want to write unit tests for a component. The very first test fails,
  with this error: </p>
  
  <blockquote>
    <p>Error: Expected undefined to be truthy.</p>
  </blockquote>
  
  <p><code>it</code> block outputting the error:</p>
  
  <pre class="lang-js prettyprint-override"><code>it('should create', () =&gt; {
      expect(component).toBeTruthy();
    });
  </code></pre>
  
  <p>login template:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h3&gt;Login&lt;/h3&gt;
  &lt;form class="form form-group" (ngSubmit)="onSubmit()"&gt;
    &lt;div class="row"&gt;
      &lt;label for="email" class="login-form-label col-4"&gt;Email:&lt;/label&gt;
      &lt;input ngModel [(ngModel)]="email" name="email" (ngModelChange)="validateEmail()" type="email" id="email" class="col-3 form-control"&gt;
      &lt;span class="error col-sm-4"&gt;{{ this.emailErr }}&lt;/span&gt;
    &lt;/div&gt;
    &lt;br&gt;
    &lt;div class="row"&gt;
      &lt;label for="password" class="login-form-label col-4"&gt;Wachtwoord:&lt;/label&gt;
      &lt;input ngModel [(ngModel)]="password" name="password" (ngModelChange)="validatePassword()" type="password" id="password" class="col-3 form-control"&gt;
      &lt;span class="error col-sm-4"&gt;{{ this.passwordErr }}&lt;/span&gt;
    &lt;/div&gt;
    &lt;input type="submit" [disabled]="!isValid()" value="Login" class="login-button col-1"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I tried:</p>
  
  <pre class="lang-js prettyprint-override"><code>describe('LoginComponent', () =&gt; {
    let component: LoginComponent;
    let fixture: ComponentFixture&lt;LoginComponent&gt;;
  
    beforeEach(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [ LoginComponent ],
        providers: [
          LoginComponent,
          { provide: RoutingService, useValue: MockRoutingService },
          { provide: AuthenticationService, useValue: MockAuthenticationService }
        ]
      })
      .compileComponents();
      fixture = TestBed.createComponent(LoginComponent);
      component = fixture.componentInstance;
    });
  
  </code></pre>
  
  <p>Also:</p>
  
  <pre class="lang-js prettyprint-override"><code>describe('LoginComponent', () =&gt; {
    let component: LoginComponent;
    let fixture: ComponentFixture&lt;LoginComponent&gt;;
  
    beforeEach(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [ LoginComponent ],
        providers: [
          LoginComponent,
          { provide: RoutingService, useValue: MockRoutingService },
          { provide: AuthenticationService, useValue: MockAuthenticationService }
        ]
      })
      .compileComponents();
    });
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(LoginComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  </code></pre>
  
  <p>And also:</p>
  
  <pre class="lang-js prettyprint-override"><code>describe('LoginComponent', () =&gt; {
    let component: LoginComponent;
    let fixture: ComponentFixture&lt;LoginComponent&gt;;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [ LoginComponent ],
        providers: [
          LoginComponent,
          { provide: RoutingService, useValue: MockRoutingService },
          { provide: AuthenticationService, useValue: MockAuthenticationService }
        ]
      })
      .compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(LoginComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  </code></pre>
  
  <p><code>LoginComponent</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
  })
  export class LoginComponent implements OnInit {
  
    private password = '';
    private email = '';
    private emailErr = '';
    private passwordErr = '';
  
    constructor(private authService: AuthenticationService, private routingService: RoutingService) { }
  
    ngOnInit() {
    }
  
    onSubmit() {
      this.emailErr = '';
      this.passwordErr = '';
  
      const response: { ['emailValid']: boolean, ['passwordValid']: boolean } = this.authService.login(this.email, this.password);
  
      const self = this;
      setTimeout(() =&gt; {
        if (response.emailValid === false) {
          self.emailErr = '* Your username was incorrect, please try again.';
          return;
        } else if (response.passwordValid === false) {
          self.passwordErr = '* Your password was incorrect, please try again.';
          return;
        }
        self.routingService.route('home');
      }, 300);
    }
  
    validateEmail() {
      this.emailErr = '';
      if (this.email === '') {
        this.emailErr = '* Please enter your email.';
      }
    }
  
    validatePassword() {
      this.passwordErr = '';
      if (this.password === '') {
        this.passwordErr = '* Please enter your password.';
      }
    }
  
    isValid() {
      if (this.password === '' || this.email === '') {
        return false;
      } else if (this.emailErr !== '' || this.passwordErr !== '') {
        return false;
      }
      return true;
    }
  
  }
  </code></pre>
  
  <p>What am I missing here?</p>