babel-plugin-react-native-testid-chain

A Babel plugin that automatically adds chained testID attributes to your React Native components for easier E2E testing.

This plugin traverses your React component tree and generates a unique, chained testID for each element based on its component hierarchy. This makes it incredibly easy to locate elements in your tests without manually adding testID props everywhere.

Features

• Automatic testID generation: No more manual testID props.
• Chained testIDs: Creates hierarchical IDs like MyScreen-MyButton-Icon.
• React Native optimized: Ignores common layout components (View, Text, etc.) by default for cleaner IDs.
• Customizable: Configure the attribute name, delimiter, and ignored components.
• Supports Class and Function Components.

Install

$ npm install --save-dev babel-plugin-react-native-testid
$ yarn add --dev babel-plugin-react-native-testid

Usage

In your .babelrc.json:

{
  "plugins": ["react-native-testid"]
}

Before:

function MyButton() {
  return (
    <TouchableOpacity>
      <Text>Click Me</Text>
    </TouchableOpacity>
  );
}

function MyScreen() {
  return (
    <View>
      <MyButton />
    </View>
  );
}

After:

function MyButton() {
  return (
    <TouchableOpacity testID="MyButton-TouchableOpacity">
      <Text>Click Me</Text>
    </TouchableOpacity>
  );
}

function MyScreen() {
  return (
    <View>
      <MyButton />
    </View>
  );
}

// In your tests, you can now find the TouchableOpacity with:
// await element(by.id('MyScreen-MyButton-TouchableOpacity'));

Note: The plugin adds testIDs to nested elements within components, not to the component invocation itself. The example above shows how the testID is applied inside MyButton when MyScreen is rendered.

Options

attributes

Specify which attributes to add. Defaults to ["testID"].

.babelrc.json

{
  "plugins": [
    ["react-native-testid", { "attributes": ["testID", "data-cy"] }]
  ]
}

This will add both testID="MyScreen-MyButton" and data-cy="MyScreen-MyButton" to the component.

delimiter

Customize the separator for the chained testID. Defaults to -.

.babelrc.json

{
  "plugins": [
    ["react-native-testid", { "delimiter": "_" }]
  ]
}

This will generate testIDs like MyScreen_MyButton.

ignoreElements

An array of component names to ignore when creating the testID chain. The plugin comes with a default list of common React Native components: ['View', 'Text', 'Image', 'ScrollView', 'FlatList', 'SectionList', 'TouchableOpacity', 'TouchableHighlight', 'TouchableWithoutFeedback', 'SafeAreaView', 'Modal', 'Pressable', 'ActivityIndicator', 'Fragment'].

You can override this list completely.

.babelrc.json

{
  "plugins": [
    ["react-native-testid", { "ignoreElements": ["View", "MyCustomWrapper"] }]
  ]
}

Now, Text will no longer be ignored (unless you add it to the array), but MyCustomWrapper will be.

License

MIT