babel-plugin-react-native-testid

0.2.1 verified Sat Apr 25 auth: no javascript

A Babel plugin that automatically generates testID (and id) props for React Native components, designed to streamline automated testing with Detox, Appium, or similar frameworks. Current stable version is 0.2.1, released under an Apache-2.0 license, with no recent updates. Release cadence is low. Key differentiators: supports a multi-priority strategy for testID generation (manual props, meaningful attributes like title/placeholder, children text with i18n key extraction, fallback to component hierarchy), is highly configurable (attributes list, delimiter, ignore list, custom meaningful attributes), and ships TypeScript definitions. Alternatives like react-native-testid or babel-plugin-react-native-transform-testid offer simpler fixed-pattern approaches, whereas this plugin prioritizes semantic and stable IDs from props and i18n keys.

Common errors

error Error: Plugin/preset files are not allowed to export objects, only functions. (While processing: /path/to/node_modules/babel-plugin-react-native-testid/lib/index.js) ↓

cause Using a version of Babel that expects plugin functions, but the plugin exports an object (common in older Babel 6).

fix

Upgrade Babel to v7+ or use babel-upgrade. The plugin is designed for Babel 7.

error TypeError: Cannot read properties of undefined (reading 'node') ↓

cause The plugin encountered a node type it doesn't handle, or there's a misconfiguration causing the visitor to fail.

fix

Ensure your Babel config is correct and the plugin is last in the plugins array. If the error persists, file an issue with the plugin author.

error Require stack: - /path/to/project/babel.config.js ... Error: Cannot find module 'babel-plugin-react-native-testid' ↓

cause Plugin is not installed or not in node_modules.

fix

Run 'npm install babel-plugin-react-native-testid --save-dev' or 'yarn add babel-plugin-react-native-testid --dev'.

Warnings

breaking Version 0.2.0 changed default behavior: now adds both 'testID' and 'id' attributes, not just 'testID'. ↓

fix If you only want 'testID', set attributes: ['testID'] in config.

breaking Version 0.2.0 removed support for Node.js <10 (engine field update). ↓

fix Upgrade Node.js to >=10 or stay on older plugin version.

deprecated The 'addId' option is deprecated as of 0.2.0; use the 'attributes' option instead. ↓

fix Replace 'addId: true' with 'attributes: ["testID", "id"]' in config.

gotcha Plugin does NOT execute i18n translation functions; it extracts the raw translation key (e.g., 'auth.welcome' from t('auth.welcome')). This is intentional for stable IDs, but won't work if your i18n function uses dynamic keys or interplation. ↓

fix Ensure i18n keys are static strings passed directly to the t() or i18n.t() call. Avoid template literals or variable keys.

gotcha The plugin ignores elements listed in 'ignoreElements' (default includes View, Text, Image). This means those components will NEVER get auto-generated testID. If you need testID on them, remove them from the list. ↓

fix Set 'ignoreElements: []' in config if you want testID on all components.

gotcha When children contain JSX expressions (e.g., <Text>{conditional ? 'A' : 'B'}</Text>), the plugin cannot extract a stable string and may fall back to hierarchy-based ID (e.g., 'Component-Text'). ↓

fix If you need stable testID from text, ensure children are static strings or i18n function calls.

Install

npm install babel-plugin-react-native-testid

yarn add babel-plugin-react-native-testid

pnpm add babel-plugin-react-native-testid

Imports

default (plugin)

wrong

// Wrong: trying to import as a module in app code
import plugin from 'babel-plugin-react-native-testid'

correct

// In babel.config.js
module.exports = { plugins: ['babel-plugin-react-native-testid'] }

This is a Babel plugin, not a runtime library. It should only be configured in Babel config files, not imported in application code.

Options type
```
import type { BabelPluginReactNativeTestIdOptions } from 'babel-plugin-react-native-testid'
```
Package ships TypeScript types. The options type may be exported for typed configuration. Use import type for type-only usage.

Quickstart

Configures the Babel plugin with custom settings and demonstrates how it automatically adds testID to TextInput, Button, and Text components with i18n key extraction.

// babel.config.js
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'babel-plugin-react-native-testid',
      {
        attributes: ['testID'],  // Only add testID, not id
        delimiter: '-',
        ignoreElements: ['View', 'Text', 'Image'],  // Skip these
        meaningfulAttributes: ['title', 'placeholder', 'label', 'alt']
      }
    ]
  ]
};

// Your React Native component
function LoginScreen() {
  return (
    <View>
      <TextInput placeholder="Enter username" />
      <Button title="Login" />
      <Text>{t('auth.welcome')}</Text>
    </View>
  );
}

// Output will be:
// <TextInput placeholder="Enter username" testID="Enter username" />
// <Button title="Login" testID="Login" />
// <Text testID="auth.welcome">{t('auth.welcome')}</Text>