How to write unit test case for cellrenderer in ag-grid

.html

    <ag-grid-angular
style="width: 100%; height: 100%"
class="ag-theme-alpine"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[rowData]="rowData$ | async"
[animateRows]="true"
[pagination]="true"
[paginationPageSize]="10"
(gridReady)="onGridReady($event)"></ag-grid-angular>

component.ts

 public columnDefs: ColDef[] = [
{
headerName: 'Source Name',
field: 'SourceName',
width: 300,
cellRenderer: function (params: any) {
return (
'<a href="javascript: void(0)" class="noUnderline">' + params.data.SourceName + '</a>'
);
}
},
{
headerName: 'Type',
field: 'Type',
width: 300,
cellRenderer: function (params: any) {
return '<a href="javascript: void(0)" class="noUnderline">' + params.data.Type + '</a>';
}
},
{ headerName: 'Location', field: 'Location', width: 350 },
{ headerName: 'Pipeline', field: 'Pipeline', width: 350 }
]

component.spec.ts

      it('should call the cellrenderer function - SourceName', fakeAsync(() => {
const cellRenderer = component.columnDefs.find(c => c.field === 'SourceName').cellRenderer as any;
expect(cellRenderer({data: { 'SourceName': 'OPCUA_Site1' }})).toEqual('OPCUA_Site1');
}));

The unit test throws an error saying "Object is possibly 'undefined'."
Can someone please help me with the correct test case?

The find function on an array returns an item of the array or undefined. It will return undefined if it doesn't find the element.

To fix it, you could protect with an if check:

it('should call the cellrenderer function - SourceName', fakeAsync(() => {
const cellRenderer = component.columnDefs.find(c => c.field === 'SourceName');
// If it is found (and not undefined), make the assertion.
if (cellRenderer) {
expect(cellRenderer({data: { 'SourceName': 'OPCUA_Site1' }})).toEqual('OPCUA_Site1');
}));
} else {
// fail the unit test since we couldn't find the cellRenderer.
fail();
}