1

我想测试我的地图组件。我在 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>
    );
  }
}
4

0 回答 0