rnmapbox / rnmapbox/maps

[Bug]: unable to interact with symbolLayer using a test end2end framework (Detox)

Open
#4,087 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug 🪲 enhancement feature
Dominant language
Kotlin
Stars
2.9k
Forks
947
Avg merge
6d 37m
Merged PRs (30d)
1

Description

Mapbox Implementation

Mapbox

Mapbox Version

default

React Native Version

0.76.7

React Native Architecture

Old Architecture (Paper/bridge)

Platform

iOS, Android

@rnmapbox/maps version

10.1.35

Standalone component to reproduce
import React from 'react';
import Mapbox from '@rnmapbox/maps';

type Props = {
 clusters: any[];
 markerStyle: any;
 clusterStyle: any;
 onPressMarkerCluster: (e: any) => void;
};

export default function ClusteredMarkers({
 clusters,
 markerStyle,
 clusterStyle,
 onPressMarkerCluster,
}: Props) {
 return (
   <Mapbox.ShapeSource
     id="hotels"
     shape={{
       type: 'FeatureCollection',
       features: clusters,
     }}
     onPress={onPressMarkerCluster}
   >
     <Mapbox.SymbolLayer
       id="marker"
       filter={['!', ['has', 'point_count']]}
       style={markerStyle}
     />
     <Mapbox.SymbolLayer
       id="cluster"
       filter={['has', 'point_count']}
       style={clusterStyle}
     />
   </Mapbox.ShapeSource>
 );
}

We are encountering a significant blocker when attempting to write End-to-End (E2E) tests for features involving map interactions using Detox.
It is currently impossible to interact with markers rendered by the <Mapbox.SymbolLayer /> component.

Observed behavior and steps to reproduce
  1. Inability to set testID: The <Mapbox.SymbolLayer /> component does not accept standard React Native UI properties like testID or accessibilityLabel.

  2. No Text or Label Exposure: The text properties or names associated with the GeoJSON features used in the layer are not translated into accessible labels, making text-based targeting (e.g., by.text('My Marker Name')) also impossible.

Consequently, when running a Detox test, any attempt to select a symbol results in a "View not found" error.

Expected behavior

We require a mechanism to assign and expose a unique identifier to the symbols rendered by the SymbolLayer so that E2E tools can interact with them.
For example, we would expect a solution that allows:

  • Targeting by feature property: Using a property from the GeoJSON feature (e.g., properties.id) as the testID for the symbol.

  • Interaction: Tapping, long-pressing, or querying the visible state of the symbol.

Is there a documented way to achieve E2E testability for SymbolLayer symbols that we may have missed?

Notes / preliminary analysis

No response

Additional links and references

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the standalone ClusteredMarkers example and reproduce the missing SymbolLayer target in Detox on iOS and Android. Trace the SymbolLayer and ShapeSource APIs and their identifier or accessibility handling; done means a feature-derived identifier can be queried and used for tap, long-press, and visible-state assertions.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native
Domain
mobile, testing-qa
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.