如何测试“react-google-autocomplete”库中的位置选项

问题描述

我正在尝试测试“react-google-autocomplete”库，但我不知道如何测试在您输入地址或在输入地点时按下回车键时是否显示地点。我正在使用反应测试库。选项位于“display:none”div 中。

以下是功能组件代码

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']}
    />)
}

这是我尝试过的测试

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')
});

我已经能够测试输入更改，但不能测试提交或选项。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）