XCUITest is failing because testID cannot be found when using native base components

The native-base version I am using is 2.2.1.

I have the following UI test in Xcode:

class timesUITests: XCTestCase {
…
    func testExample() {
      let app = XCUIApplication()
      setupSnapshot(app)
      app.launch()
      
      app.textFields["testOne"].tap()
      app.textFields["testOne"].typeText("Hello")
}

and the following components rendered in my app:

      <View>
        <Input
          testID={'testOne'}
          value={this.state.sometext}
          onChangeText={(sometext) => this.setState({sometext})}
        />
      </View>

I would expect that the test succeeds, but it fails with the native base component Input. When I replace the native base Input component with the React Native counterpart TextInput the test runs fine and succeeds in Xcode.

It seems that the test fails in Xcode because the testID prop gets lost somehow.

I am using iOS only, but I would expect that a similar test would also fail in Android, as the testID gets lost on the way.

It would be great if NativeBase would respect the testID prop, because this would allow testing in Xcode and would also support the great Fastlane Snapshot tool.

(Thanks for NativeBase, it is great 😃

[faogustavo]

I discovered that Touchable components are the problem. When you use one, all itens inside it will not be accessible by testID. To fix, just add a accessible={false} prop to the Item.

            <Item floatingLabel accessible={false}>
              <Label>
                {t("loginUsername")}
              </Label>
              <Input
                testID="login-username"
                ref={username => {
                  this.username = username;
                }}
                returnKeyType="next"
                clearButtonMode="while-editing"
                autoCapitalize="none"
                autoCorrect={false}
                value={this.state.username}
                onSubmitEditing={() => {
                  this.password._root.focus();
                }}
                onChangeText={username => {
                  this.setState({ username });
                }}
              />
            </Item>

A better explanation can be found here: https://github.com/facebook/react-native/issues/11869 If possible, please add this to documentation for future problems.

[saggiyogesh]

@faogustavo Works great. Thanks.