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

[cutemachine]

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 :)

[cowboy]

I'm also seeing something similar here. Is there any way to fix this?

[faogustavo]

I'm having same issue. But the problema only happens on itens that are contained by <Item />

My test case is:

func testExample() {

    let app = XCUIApplication()
    app.textFields["login-username"].tap()
    app.typeText("gustavo")
    app.secureTextFields["login-password"].tap()
    app.typeText("123456")
    app.otherElements["login-button"].tap()

}

Fails

            <Item floatingLabel>
              <Label>
                {t("loginPassword")}
              </Label>
              <Input
                testID="login-password"
                getRef={password => {
                  this.password = password;
                }}
                returnKeyType="done"
                clearButtonMode="while-editing"
                autoCapitalize="none"
                value={this.state.password}
                onSubmitEditing={() => {
                  this.onSubmit();
                }}
                onChangeText={password => {
                  this.setState({ password });
                }}
                secureTextEntry
              />
            </Item>

Works fine

            {/* <Item floatingLabel>
              <Label>
                {t("loginPassword")}
              </Label> */}
              <Input
                testID="login-password"
                getRef={password => {
                  this.password = password;
                }}
                returnKeyType="done"
                clearButtonMode="while-editing"
                autoCapitalize="none"
                value={this.state.password}
                onSubmitEditing={() => {
                  this.onSubmit();
                }}
                onChangeText={password => {
                  this.setState({ password });
                }}
                secureTextEntry
              />
            {/* </Item> */}

---

Envionment

• React: 16.0.0-alpha.12
• React-Native: 0.50.4
• Native-Base: 2.3.3

[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.

[SupriyaKalghatgi]

@cutemachine @cowboy @faogustavo Need help on this?

[cutemachine]

I have not tried @faogustavo's solution.

Thanks, @SupriyaKalghatgi for offering your help here. At the moment I do not have time to test it :(

[saggiyogesh]

@faogustavo Works great.
Thanks.