这是我获得useAutocomplete钩子用法的代码。我想测试onChange的代码覆盖率。有什么办法可以通过使用反应测试库来做到这一点。
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);
}
}
}
});
当我从react-testing-library中进行测试时,我的render元素看起来像这样,并且groupedOptions没有任何数据。
<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>