Angular 5 jasmine tests, component not compiling

Question

I'm trying to write a simple unit test, but cannot get my template to compile. The AppComponent has one variable called text which renders to an h1 tag. When testing the html, this always comes back as '' . Does anyone know what I'm missing here?

Test code

import {TestBed, async, ComponentFixture} from '@angular/core/testing';
import {AppComponent} from './app.component';

describe('AppComponent', () => {

  let fixture: ComponentFixture<AppComponent>;
  let component: AppComponent;
  const mainTitle = 'Angular Unit Testing';

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
    })
      .compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(AppComponent);
        component = fixture.componentInstance;
      });
  }));

  it(`should render ${mainTitle} to an H1 tag`, async(() => {
    const compiled = fixture.debugElement.nativeElement;
    console.log('here', compiled.querySelector('h1'));
    expect(compiled.querySelector('h1').textContent).toEqual(mainTitle);
  }));

});

Component code

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})

export class AppComponent {
  text = 'Angular Unit Testing';
}

HTML

<h1>{{text}}</h1>

Answer 1

You must set "text" public property of component-only then it will be rendered inside h1 tag

it(`should render ${mainTitle} to an H1 tag`, async(() => {
  const compiled = fixture.debugElement.nativeElement;
  component.text = 'Angular Unit Testing';
  fixture.detectChanges(); 
  expect(compiled.querySelector('h1').textContent).toEqual(mainTitle);
}));