Unit testing error: Cannot read property 'controls' of null

Question

I'm trying to run simple test and I'm stuck with the following issue:

TypeError: Cannot read property 'controls' of null
    at OvertimeComponent_ng_container_6_Template (ng:///OvertimeComponent.js:250:62)
    at executeTemplate

My code of the template:

<ng-container [formGroup]='shift'>
  <mat-card>
      <h6 class="text-left">Overtimes</h6>
    <div class="mt-2 mb-1">
      <mat-accordion multi="true">
        <ng-container *ngIf='shift.value'>
          <ng-container formArrayName="overtimes"
                        *ngFor="let overtime of shift.get('overtimes')['controls'];let i = index">
            <ng-container [formGroupName]='i'>
                <mat-expansion-panel>
...

My simple spec file for testing, there is just one test that component should be created:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { OvertimeComponent } from './overtime.component';
import {FormBuilder, ReactiveFormsModule, Validators} from "@angular/forms";
import {MatDialogModule} from "@angular/material/dialog";

describe('OvertimeComponent', () => {
  let component: OvertimeComponent;
  let fixture: ComponentFixture<OvertimeComponent>;
  const formBuilder: FormBuilder = new FormBuilder();

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ OvertimeComponent ],
      imports: [ReactiveFormsModule, MatDialogModule],
      providers: [ { provide: FormBuilder, useValue: formBuilder } ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(OvertimeComponent);
    component = fixture.componentInstance;
    component.shift = formBuilder.group({
      chain: ['chain', Validators.required],
      ip: [
            '',
            Validators.required
      ],
      action: ['action', Validators.required]
    });

    fixture.detectChanges();
  });

  it('should create', () => {
      expect(component).toBeTruthy();
  });
});

I will be appreciate any help to resolve this issue! Thanks in advance!

score 0 · Answer 1 · answered Jun 11 '20 at 10:47

I solved problem just replacing this to this:

<ng-container formArrayName="overtimes"
                        *ngFor="let overtime of shift.get('overtimes')['controls'];let i = index">

                        *ngFor="let overtime of shift.get('overtimes')?.controls;let i = index">

Unit testing error: Cannot read property 'controls' of null

1 Answers1