'Angular Cannot read properties of undefined (reading 'patchValue')

I have this component that I want to test but I keep getting the following error message

TypeError: Cannot read properties of undefined (reading 'patchValue')

The component:

import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
import { FormGroup } from "@angular/forms";
import { IDivision } from "ClientApp/src/app/models/referencedata/division";
import { IRegion } from "ClientApp/src/app/models/referencedata/region";
import { ISalesForceTitle } from "ClientApp/src/app/models/referencedata/salesforcetitle";

@Component({
    selector:'sym-sales-patch', 
    templateUrl: './sales-patch.component.html'
})
export class SalesPatchComponent implements OnInit {
    
    @Input() submitted: boolean;
    @Input() canRemoveItems: boolean;

    @Input() formGroup: FormGroup;

    @Output() onDelete: EventEmitter<string> = new EventEmitter();

    constructor() {
    }

    ngOnInit(): void {
        debugger;
    }

    delete() {
        this.onDelete.emit();
    }
}

Below shows the html template with the minimal set of data that it still complains about

<p-fieldset [toggleable]="true" styleClass="p-mt-2">
    <p-header>
        {{formGroup.controls.patch.value}} 
        <i *ngIf="canRemoveItems === true" 
        title="Click here to remove the sales patch"
        class="p-m-1 fas fa-unlink sym-action"
        (click)="delete()"></i>
    </p-header>
</p-fieldset>

The error seems to stem from the calling the following but I have no idea what I am doing wrong with the test

 {{formGroup.controls.patch.value}} 

here is the test:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DropdownModule } from 'primeng/dropdown';
import { FieldsetModule } from 'primeng/fieldset';
import { InputNumberModule } from 'primeng/inputnumber';
import { InputTextModule } from 'primeng/inputtext';
import { SalesPatchComponent } from './sales-patch.component';

describe('SalesPatchComponent - Isolated Tests', () => {
    
    let fixture: ComponentFixture<SalesPatchComponent>;
    let component: SalesPatchComponent;

    beforeEach(() => {

        TestBed.configureTestingModule({
            imports: [
                FormsModule,
                ReactiveFormsModule, 
                InputNumberModule, 
                DropdownModule,
                InputTextModule,
                FieldsetModule, 
                BrowserAnimationsModule
            ], 
            declarations: [SalesPatchComponent]
        }).compileComponents();

        fixture = TestBed.createComponent(SalesPatchComponent);
        component = fixture.componentInstance;
    });

    it('should create', () => {
        component.formGroup.patchValue({
           patch: 'Test Patch', 
           shortCode: 'AP123', 
           salesForceTitle: 1, 
           region: 1, 
           division: 1
        });
        fixture.detectChanges();
        expect(fixture).toBeTruthy();
    })

})

As you can see above I am also trying to set the fromGroup values, with a syntax that worked for me on another project!

Any ideas how I can make this test pass?

As @SomeStudent, said I initialized the form group that I passed in, then it mostly works.

    it('should create', () => {
        component.formGroup = formBuilder.group({
            patch: 'Test Patch', 
            shortCode: 7627, 
            salesForceTitle: 1, 
            region: 1, 
            division: 1
        });
        fixture.detectChanges();
        expect(fixture).toBeTruthy();
    })


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source