React Native is a technology to develop mobile apps on iOS and Android that have a near-native feel, all from one codebase. It is a very promising technology, but the documentation on testing can use some more depth. There are some pointers in the docs but they leave you wanting more. In this blog post I will show you how to use XCUITest to record and run automated UI tests on iOS.

Warning: This blogpost is based on an older version of React Native and XCode, things might look different now, use this post as an inspiration, the concept is still the same.

Start by generating a brand new react native project and make sure it runs fine:

You should now see the default “Welcome to React Native!” screen in your simulator.

Let’s add a textfield and display the results on screen by editing index.ios.js:
[javascript title=”index.ios.js” firstline=”15″ language=”continued:"”]
class XCUITest extends Component {

constructor(props) {
this.state = { text: ” };

render() {
return (
<View style={styles.container}>
style={{borderWidth: 1, height: 30, margin: 10}}
onChangeText={(text) => this.setState({text})}
<View testID="test-id-textfield-result" >
<Text style={{fontSize: 20}}>You typed: {this.state.text}</Text>
Notice that I added


to the TextInput and the View. This causes React Native to set a accessibilityIdentifier on the native view. This is something we can use to find the elements in our UI test.

Recording the test

Open the XCode project in the

folder and click

. Then pick

. The defaults are ok, click Finish. Now there should be a

folder with a

file in it.

Let’s open

and place the cursor inside the

method. At the bottom left of the editor there is a small red button. If you press it, the app will build and start in the simulator.

Every interaction you now have with the app will be recorded and added to the

method, just like in the looping gif at the bottom of this post. Now type “123” and tap on the text that says “You typed: 123″. End the recording by clicking on the red dot again.

Something like this should have appeared in your editor:
[javascript title=”XCUITestUITests.swift” firstline=”35″ language=”continued:"”]
let app = XCUIApplication()
app.staticTexts["You typed: 123"].tap()

Notice that you can pull down the selectors to change them. Change the “You typed” selector to make it more specific, change the


and then surround it with

to do an actual assert:
[javascript firstline=”38″ language=”continued:"”]
XCTAssert(app.otherElements["test-id-textfield-result"].staticTexts["You typed: 123"].exists)
Now if you run the test it will show you a nice green checkmark in the margin and say “Test Succeeded”.

In this short blogpost I showed you how to use the React Native

attribute to tag elements and record and adapt a

in XCode. There is a lot more to be told about React Native, so don’t forget to follow me on twitter (@wietsevenema)

Recording UI Tests in XCode