title: Unit Testing in Angular, Test Component is undefined
body: <p>I am trying to unit test a "add object" (add dish) component in Angular 6. With my current code I get the error <strong>"Cannot read property 'dishForm' of undefined".</strong> </p>
  
  <p>So, it seems it does the DishAddComponent is not recognized as the component to be tested? Can anybody help me out with this? Thanks in advance!</p>
  
  <p>I've also tried (amongst others) adding async to beforeEach, as described here: <a href="https://stackoverflow.com/questions/40039789/angular-2-testing-component-instance-is-undefined">Angular 2 Testing - Component Instance is undefined</a> , but it does not work.</p>
  
  <p>Angular Component to be Unit Tested:</p>
  
  <pre><code>export class DishAddComponent implements OnInit {
    public dishForm: FormGroup;
  
    constructor(private dishService: DishService,
      private formBuilder: FormBuilder,
      private router: Router) { }
  
    ngOnInit() {
      // define dishForm (with empty default values)
      this.dishForm = this.formBuilder.group({
        name: ['', [Validators.required, Validators.maxLength(30), Validators.pattern('[a-zA-Z :]*')]],
        country: [''],
        ingredients: this.formBuilder.array([]),
        recipe: ['', [Validators.required, Validators.minLength(50)]],
      }, { validator: CustomValidators.DishNameEqualsCountryValidator });
    }
  
    addIngredient(): void {
      let ingredientsFormArray = this.dishForm.get('ingredients') as FormArray;
      ingredientsFormArray.push(IngredientSingleComponent.createIngredient());
    }
  
    addDish(): void {
      if (this.dishForm.dirty &amp;&amp; this.dishForm.valid) {
  
        let dish = this.dishForm.value;
  
        this.dishService.addDish(dish)
          .subscribe(
            () =&gt; {
              this.router.navigateByUrl('/dishes');
            });
      }
    }
  }
  </code></pre>
  
  <p>Unit Test in Jest:</p>
  
  <pre><code>describe('DishAddComponent', () =&gt; {
    let component: DishAddComponent;
    let fixture: ComponentFixture&lt;DishAddComponent&gt;;
    let formGroup: FormGroup;
    let formBuilderMock: any;
    let dishServiceMock: any;
  
    beforeEach(() =&gt; {
        formBuilderMock = {
        group: jest.fn().mockName('formBuilderMock.group'),
        array: jest.fn().mockName('formBuilderMock.array')
      };
  
      dishServiceMock = {
        addDish: jest.fn().mockName('dishServiceMock.addDish')
      };
  
      TestBed.configureTestingModule({
        imports: [ ReactiveFormsModule, FormsModule, RouterTestingModule.withRoutes(routes)],
        declarations: [ DishAddComponent, IngredientSingleComponent ],
        providers: 
        [ 
          { provide: FormBuilder, useValue: formBuilderMock },
          { provide: FormGroup, useValue: formGroup },
          { provide: DishService, useValue: dishServiceMock }
        ]
      });
      fixture = TestBed.createComponent(DishAddComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it('form invalid when empty', () =&gt; {
      (console).log(component);
    expect(component.dishForm.valid).toBeFalsy();
   });
  });
  </code></pre>
  
  <p><strong>EDIT:</strong>
  If I use the code below, I get an error as well:</p>
  
  <p>DishAddComponent › should create  </p>
  
  <p>expect(received).toBeTruthy()   </p>
  
  <p>Received: undefined</p>
  
  <pre><code>  it('should create', () =&gt; {
      expect(component).toBeTruthy();
    });
  </code></pre>