Reactjs 如何在';反应谷歌自动完成';图书馆
我正在尝试测试“react google autocomplete”库,但我不知道如何测试在键入地址或键入位置时按enter键是否显示位置。我正在使用react测试库。选项位于“显示:无”分区内 下面是功能部件代码Reactjs 如何在';反应谷歌自动完成';图书馆,reactjs,google-maps-api-3,jestjs,react-testing-library,googleplacesautocomplete,Reactjs,Google Maps Api 3,Jestjs,React Testing Library,Googleplacesautocomplete,我正在尝试测试“react google autocomplete”库,但我不知道如何测试在键入地址或键入位置时按enter键是否显示位置。我正在使用react测试库。选项位于“显示:无”分区内 下面是功能部件代码 function LocationSearch(props) { const onPlaceSelected = (place) => { if(typeof place.geometry !== 'undefined'){ const
function LocationSearch(props) {
const onPlaceSelected = (place) => {
if(typeof place.geometry !== 'undefined'){
const latValue = place.geometry.location.lat();
const lngValue = place.geometry.location.lng();
props.setLocation({ lat: latValue, lng: lngValue })
props.setError(false)
}else{
props.setError('place')
}
};
return ( <Autocomplete
style={{
width: '60%',
height: '40px',
textAlign: 'center',
borderRadius: '10px',
borderColor: 'black',
marginTop:'30px',
placeholder:'Test'
}}
onPlaceSelected={(place) => onPlaceSelected(place)}
types={['address']}
/>)
}
功能定位搜索(道具){
const onPlaceSelected=(place)=>{
if(typeof place.geometry!=“未定义”){
const latValue=place.geometry.location.lat();
const lngValue=place.geometry.location.lng();
props.setLocation({lat:latValue,lng:lngValue})
props.setError(false)
}否则{
props.setError('place')
}
};
返回(onPlaceSelected(place)}
类型={['address']}
/>)
}
这是我尝试过的测试
global.google = {
maps: {
places: {
Autocomplete: function () {
return { addListener: jest.fn() };
},
event: { trigger: jest.fn() }
}
}
};
it('Location search', async () => {
const rendered = render(
<Context.Provider value={{ auth, setAuth }}>
<Router history={history} >
<LocationSearch setLocation={setLocation} setError={setError}/>
</Router>
</Context.Provider>)
const autocomplete = rendered.getByTestId('autocomplete-search');
autocomplete.focus()
fireEvent.change(autocomplete, { target: { value: 'Calle La Ronda' } })
await wait()
fireEvent.keyDown(autocomplete, { key: 'ArrowDown' })
await wait()
fireEvent.keyDown(autocomplete, { key: 'Enter' })
await wait()
fireEvent.click(autocomplete);
expect(autocomplete.value).toEqual('Calle La Ronda, San Salvador, El Salvador')
});
global.google={
地图:{
地点:{
自动完成:函数(){
返回{addListener:jest.fn()};
},
事件:{trigger:jest.fn()}
}
}
};
它('位置搜索',异步()=>{
常量渲染=渲染(
)
const autocomplete=rendered.getByTestId('autocomplete-search');
autocomplete.focus()
更改(自动完成,{target:{value:'Calle La Ronda'})
等待等待
firevent.keyDown(自动完成,{key:'ArrowDown'})
等待等待
firevent.keyDown(自动完成,{key:'Enter'})
等待等待
fireEvent.单击(自动完成);
expect(autocomplete.value).toEqual('Calle La Ronda,圣萨尔瓦多,萨尔瓦多')
});
我已经能够测试输入更改,但无法测试提交或选项