我想测试我的地图组件。我在 Jest 中使用 react-testing-library。我不知道如何从中获取任何节点<GoogleMap></GoogleMap>
(此组件太深)。我试过获取标记和删除按钮,但它不起作用。我在删除按钮附近添加了评论(更容易搜索)。有人可以给我任何提示吗?
export const MapWithAMakredInfoWindow = compose(
withProps({
googleMapURL: `https://maps.googleapis.com/maps/api/js?key=${apiKey}&v=3.exp&libraries=geometry,drawing,places`,
containerElement: ( ... ),
withStateHandlers( ... ),
withScriptjs,
withGoogleMap,
lifecycle({
componentDidMount() {
const refs = {};
this.setState(...)
)(props => {
return (
<GoogleMap
...props
>
{props.indicators
.filter( ... )
.map((indicator, index) => {
return (
<Marker
data-testid="marker" // I cannot get it
...props
>
{props.isOpen &&
props.id === indicator.id && (
<InfoBox
...props
>
<InfoBoxContainer>
<InfoContent>{indicator.name}</InfoContent>
<InfoContent>{indicator.street}</InfoContent>
<InfoContent>{indicator.city}</InfoContent>
<InfoContent>{indicator.country}</InfoContent>
<InfoBtn onClick={() => props.remove(indicator.id)} data-testid="removeBtn"> //it doesn't work
Remove Marker
</InfoBtn>
</InfoBoxContainer>
</InfoBox>
)}
</Marker>
);
})}
export class Map extends Component {
constructor(props) {...}
componentDidMount() {...}
addIndicator = (event, geocode) => {...};
remove = id => {...};
render() {
return (
<Wrapper>
<MapWithAMakredInfoWindow
...
/>
</Wrapper>
);
}
}