testID not recognised by detox

user_12388068 0
Viewed 184

I've just installed detox for the first time to add some e2e test coverage for the iOS mobile app.

I've tried adding testID to the text fields but that does not seem to work.

const renderPhoneNumberInput = () => {
    return (
      <TextInputCustom
        title="Mobile Number"
        value={phoneNumber}
        onChangeText={setPhoneNumber}
        keyboardType={'phone-pad'}
        testID='phoneNumberField' 
      />
    );
  };

await expect(element(by.id('phoneNumberField'))).toBeVisible();

When the test is executed it fails on:

 DetoxRuntimeError: Test Failed: No elements found for “MATCHER(identifier == “phoneNumberField”)”

I will just add that for some reason the testID added to the text field is underlined with a message :

"TS2322: Type '{ title: string; value: string; onChangeText: Dispatch<SetStateAction>; keyboardType: "phone-pad"; testID: string; }' is not assignable to type 'IntrinsicAttributes & Props'.   Property 'testID' does not exist on type 'IntrinsicAttributes & Props'."

e2e-testing detox ios
1 Answers

You need to propagate the testID prop down to a React Native component (View, Text, TextInput, Switch, ScrollView, etc).

According to the Detox documentation:

React Native only supports the testID prop on the native built-in components. If you’ve created a custom composite component, you will have to support this prop yourself. You should probably propagate the testID prop to one of your rendered children (a built-in component)

Here is the example from the documentation:

export class MyCompositeComponent extends Component {
  render() {
    return (
      <TouchableOpacity testID={this.props.testID}>
        <View>
          <Text>Something something</Text>
        </View>
      </TouchableOpacity>
    );
  }
}
user_87120970
Related