CODEWITHSUNDEEP
iose2e-testingdetox
Pythonist
Pythonist

Reputation: 41

testID not recognised by detox

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'."

Upvotes: 2

Views: 1342

Answers (1)

Tom Aranda
Tom Aranda

Reputation: 6036

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>
    );
  }
}

Upvotes: 1

Related Questions