Can someone help me to write unit test cases for code coverage using testing lib in react along with AgGrid.
Unable to mock onAgGrid methods and API sort method. Seeing multiple errors on axios instance and so on.
Using latest versions of react and ag-grid
import React, { FC, useMemo, useState, useCallback, useRef } from 'react';
import { ColDef } from 'ag-grid-community';
import { AgGridReact } from 'ag-grid-react';
import { protectedRequest } from '../../config/network';
import { IUsers } from './home.interface';
const columnDefs: ColDef[] = [
{
field: 'name',
sort: 'asc',
headerName: 'Name',
comparator: (valueA, valueB, nodeA, nodeB, isDescending) => {
if (valueA === valueB) return 0;
if (valueA === (null || ' ') && valueB === (null || ' ')) {
return 0;
}
if (valueA === (null || ' ')) {
return isDescending ? -1 : 1;
}
if (valueB === (null || ' ')) {
return isDescending ? 1 : -1;
}
return valueA > valueB ? 1 : -1;
}
},
{ field: 'city', headerName: 'City', sortable: false },
];
const Test: FC = () => {
const gridRef = useRef<AgGridReact>(null);
const [userData, setUserData] = useState<IUsers[]>([]);
const containerStyle = useMemo(() => ({ width: '100%' }), []);
const gridStyle = useMemo(() => ({ width: '100%' }), []);
const defaultColDef = useMemo<ColDef>(() => {
return {
flex: 1,
sortable: true,
minWidth: 100
};
}, []);
const onGridReady = useCallback(() => {
gridRef.current!.api.showLoadingOverlay();
protectedRequest<null, IUsers[]>({
url: 'api/user',
method: 'GET'
})
.then((response) => {
if (!response.data.length) {
gridRef.current!.api.showNoRowsOverlay();
} else {
gridRef.current!.api.hideOverlay();
setUserData(response.data);
}
console.log(response);
})
.catch((error) => {
gridRef.current!.api.showNoRowsOverlay();
setUserData([]);
console.log(error);
});
}, []);
return (
<>
<div style={containerStyle}>
<div style={gridStyle} className="ag-theme-alpine">
<AgGridReact
ref={gridRef}
headerHeight={70}
onGridReady={onGridReady}
rowData={userData}
columnDefs={columnDefs}
defaultColDef={defaultColDef}
domLayout="autoHeight"
overlayLoadingTemplate='<span className="ag-overlay-loading-center">Fetching Data...</span>'
overlayNoRowsTemplate='<span className="ag-overlay-loading-center">No data found to display.</span>'
/>
</div>
</div>
</>
);
};
export default Test;
protectedRequest is a instance of axios created with base URL and sends every time auth header.
