How to get isActive state in Maestro E2E test for a custom toggle button in an Expo app?

Question

I am working on an Expo project and have a custom toggle button implemented as follows in my React Native app:

const [isActive, setIsActive] = useState(false);

<Pressable onPress={() => { setIsActive(!isActive) }}>
  <Animated.View
    style={[colorAnimation, styles.toggle]}
    testID={AC_LABELS.TOGGLE_COMPONENT_BUTTON_ITEM}
    accessibilityState={{ selected: isActive }}
  >
    <Animated.View style={[togglePositionAnimation, styles.item]} />
  </Animated.View>
</Pressable>

I am writing an E2E test using Maestro, and I need to check whether isActive is true or false.

Any help would be appreciated! 🚀

Answer 1

Maestro is, by design, heavily UI-based, meaning it prioritizes user-visible attributes for testing; you generally cannot (and, arguably, should not) be asserting against props that are not revealed via the user experience.

In this case, I believe the suggested approach would be to test based on a user-facing effect the isActive prop has (e.g., does it disable the button? If so, use Maestro to press it and expect something not to happen, for example).

If that's not feasible, you could potentially put use the isActive prop in a string template testID for the component, and test using a tapOn with an id to test whether the component is found with the expected value for isActive, e.g.

// on the button
testID=`my-button-${isActive}`

// in the Maestro test
- tapOn: 
     id: my-button-true