This is my code of getting the usage of useAutocomplete hook. I want to test the onChange for code coverage. Is there any way to do it by using a react-testing library.
const {
getRootProps,
getInputProps,
getListboxProps,
getOptionProps,
groupedOptions,
getClearProps
} = useAutocomplete({
id: 'use-autocomplete-demo',
options: routeInformation ? routeInformation : [],
getOptionLabel: (option) => option.routeName,
clearOnEscape: true,
disableClearable: false,
onChange: (event: React.ChangeEvent<{}>, value: any) => {
if (setPreviousRoute && setSelectedRoute) {
setPreviousRoute({...selectedRoute} as RouteInformation);
if ( value ) {
setSelectedRoute({...value} as RouteInformation);
} else {
setSelectedRoute(undefined);
}
}
}
});
My render element looks like this and the groupedOptions are not having any data when I'm testing from the react-testing-library.
<div>
<div {...getRootProps()} >
<InputBase
data-testid="SearchInput"
{...getInputProps()}
placeholder="Search Route Name"
classes={{
root: classes.inputRoot,
input: classes.inputInput,
}}
endAdornment={
<InputAdornment position="end">
<IconButton {...getClearProps()}>
<CancelRoundedIcon fontSize="small"/>
</IconButton>
</InputAdornment>
}
inputProps={{ 'aria-label': 'search' }}
/>
</div>
<ul data-testid="SuggestionsList" className={classes.suggestionContainer} {...getListboxProps()}>
{groupedOptions.map((option, index) => (
<li className={classes.suggestionItem} {...getOptionProps({ option, index })}>
{option.routeName} | ID: {option.routeId}
</li>
))}
</ul>
</div>