Unable to use testID prop for automated tests

[Codnpix]

Unable to detect react-native-phone-input component with Detox

We use PhoneInput from the react-native-phone-input package and it seems like the testID property is not supported. testID is the standard prop for testing native components with Detox and other testing tools, I'm able to use it on most of other native components but unfortunately not this one.

Could you update the package including testID prop support, or tell me if there is an alternative way to make that component and a testing program like Detox working together ?

Some snippets from my code in case you see something wrong in it : the component:

<View>
                <PhoneInput
                    value={this.state.formatedPhoneNumber}
                    ref={ref => {
                        this.phone = ref;
                    }}
                    //...
                    testID={this.props.testID}
                />
                <CountryPicker
                    ref={ref => {
                        this.countryPicker = ref;
                    }}
                    //...
                >
                    <View />
                </CountryPicker>
                <SimpleButton
                    //...
                    testID="phoneNumberInputSubmit"
                >
                    {t("Validate")}
                </SimpleButton>
            </View>

and the test I'm trying to pass looks like this :

it("should go to phone login screen", async () => {
        await expect(element(by.id("connectWithPhone"))).toBeVisible();
        await element(by.id("connectWithPhone")).tap();
        await expect(element(by.id("phoneLoginScreen"))).toBeVisible();
       // works until there

        await expect(element(by.id("phoneNumberInput"))).toBeVisible(); 
       //crashes here with error "got null"

        // ...
    });

Package.json:

"dependencies: {
     "react-native-phone-input": "^0.2.4"
}
"devDependencies": {
    "detox": "^14.8.4",
    "jest": "^24.9.0"
  },
"detox": {
    "configurations": {
      "android.emu.release": {
        "binaryPath": "android/app/build/outputs/apk/release/app-release.apk",
        "build": "cd android && ./gradlew assembleRelease assembleAndroidTest -DtestBuildType=release && cd ..",
        "type": "android.emulator",
        "device": {
          "avdName": "Nexus_6_API_26"
        }
      }
    },
    "test-runner": "jest"
  }

Config:

• React Native:0.59
• Node:8.10.0

Thank you for your help :).

[jaydenwindle]

Hi @Codnpix! You should be able to fix this by passing testID in via the textProps property. That way testID will be passed directly to the TextComponent that gets rendered, and should be visible to detox. Let me know if that works for you :)

[Codnpix]

Hi @jaydenwindle , I tried to do something like that :

import PhoneInput from "react-native-phone-input";
// ...
                <PhoneInput
                    value={this.state.formatedPhoneNumber}
                    ref={ref => {
                        this.phone = ref;
                    }}
                    onPressFlag={this.handlePhonePressFlag}
                    initialCountry={this.state.cca2}
                    onChangePhoneNumber={this.handlePhoneChange}
                    textStyle={styles.phoneTextStyle}
                    style={styles.phoneInput}
                    textProps={{testID: this.props.testID}}
                />

But my component keeps returning null in the Detox test... Is this the syntax you're telling me about ?

[Codnpix]

Hi, it worked finally ! I don't know why it didn't the first time ... Some mysteries remains but thanks :).