React Native

Maestro supports testing React Native screens and apps on both Android and iOS.
Maestro can interact with components that display text.
For the Button component definition:
<Button
title="Go"
onPress={() => Alert.alert('Success!')}
/>
The following command will tap on the Button:
- tapOn: "Go"
Maestro can interact with components that have a testID.
For the Button component definition:
<Button
title="Go"
testID="continue"
onPress={() => Alert.alert('Success!')}
/>
The following command will tap on the Button:
- tapOn:
id: "continue"
To input text to a TextInput component, first the component needs to be selected. This can be done using the tapOn command. For the component definition:
<TextInput placeholder="Change me!" />
The following commands will enter "Hello, Maestro!" in the TextInput component:
- tapOn: "Change me!"
- inputText: "Hello, Maestro!"
Replace the contents of App.js with:
import React, { useState } from 'react';
import { SafeAreaView, Button, Text, TextInput, StyleSheet } from 'react-native';
export default function App() {
const [taps, setTaps] = useState(0);
const [text, setText] = useState('')
return (
<SafeAreaView>
<Button
title="Add one"
variant="primary"
onPress={() => setTaps(taps + 1)}
/>
<Button
title="Add ten"
testID="add_ten"
onPress={() => setTaps(taps + 10)}
/>
<Text>Number of taps: {taps}</Text>
<TextInput
testId="text_input"
placeholder="Change me!"
onChangeText={setText}
/>
<Text>You typed: {text}</Text>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Create a test definition file called
flow.yaml
Add the following contents:
appId: host.exp.Exponent
---
- launchApp
- tapOn: "Add one"
- tapOn:
id: "add_ten"
- assertVisible: "Number of taps: 11"
- tapOn: "Change me!"
- inputText: "Hello, Maestro!"
- assertVisible: "You typed: Hello, Maestro!"
Run
npm start
in the react native app source directorySelect either Android or iOS Simulator
In another terminal, run
maestro test flow.yaml
When the Expo app launches, select the app that you’re testing
Screen Recording 2023-01-11 at 21.24.32.mov
28MB
Binary
React Native app tested using Maestro
In some cases, you may run into issues with nested tappable / accessible elements on iOS. You can resolve these issues by enabling accessibility for the inner component and disabling it for the outer container.
<TouchableOpacity
style={{ borderWidth: 1, margin: 5, padding: 10, backgroundColor: '#ddd' }}
accessible={false}>
<Text>This is the wrapper button </Text>
<TouchableOpacity
style={{ backgroundColor: 'red', padding: 5, width: '50%', marginTop: 10 }}
accessible={true}>
<Text>I'm a small button</Text>
</TouchableOpacity>
</TouchableOpacity>
The following command will tap on the nested Text Component:
- tapOn: "I'm a small button"
Last modified 8mo ago