{"id":19137,"library":"babel-plugin-react-native-testid","title":"babel-plugin-react-native-testid","description":"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.","status":"active","version":"0.2.1","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","babel","babel plugin","react-native","testid","typescript"],"install":[{"cmd":"npm install babel-plugin-react-native-testid","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-react-native-testid","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-react-native-testid","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for Babel plugin functionality","package":"@babel/core","optional":false}],"imports":[{"note":"This is a Babel plugin, not a runtime library. It should only be configured in Babel config files, not imported in application code.","wrong":"// Wrong: trying to import as a module in app code\nimport plugin from 'babel-plugin-react-native-testid'","symbol":"default (plugin)","correct":"// In babel.config.js\nmodule.exports = { plugins: ['babel-plugin-react-native-testid'] }"},{"note":"Package ships TypeScript types. The options type may be exported for typed configuration. Use import type for type-only usage.","wrong":null,"symbol":"Options type","correct":"import type { BabelPluginReactNativeTestIdOptions } from 'babel-plugin-react-native-testid'"}],"quickstart":{"code":"// babel.config.js\nmodule.exports = {\n  presets: ['module:metro-react-native-babel-preset'],\n  plugins: [\n    [\n      'babel-plugin-react-native-testid',\n      {\n        attributes: ['testID'],  // Only add testID, not id\n        delimiter: '-',\n        ignoreElements: ['View', 'Text', 'Image'],  // Skip these\n        meaningfulAttributes: ['title', 'placeholder', 'label', 'alt']\n      }\n    ]\n  ]\n};\n\n// Your React Native component\nfunction LoginScreen() {\n  return (\n    <View>\n      <TextInput placeholder=\"Enter username\" />\n      <Button title=\"Login\" />\n      <Text>{t('auth.welcome')}</Text>\n    </View>\n  );\n}\n\n// Output will be:\n// <TextInput placeholder=\"Enter username\" testID=\"Enter username\" />\n// <Button title=\"Login\" testID=\"Login\" />\n// <Text testID=\"auth.welcome\">{t('auth.welcome')}</Text>","lang":"typescript","description":"Configures the Babel plugin with custom settings and demonstrates how it automatically adds testID to TextInput, Button, and Text components with i18n key extraction."},"warnings":[{"fix":"If you only want 'testID', set attributes: ['testID'] in config.","message":"Version 0.2.0 changed default behavior: now adds both 'testID' and 'id' attributes, not just 'testID'.","severity":"breaking","affected_versions":"<0.2.0"},{"fix":"Upgrade Node.js to >=10 or stay on older plugin version.","message":"Version 0.2.0 removed support for Node.js <10 (engine field update).","severity":"breaking","affected_versions":"<0.2.0"},{"fix":"Replace 'addId: true' with 'attributes: [\"testID\", \"id\"]' in config.","message":"The 'addId' option is deprecated as of 0.2.0; use the 'attributes' option instead.","severity":"deprecated","affected_versions":"<0.2.0"},{"fix":"Ensure i18n keys are static strings passed directly to the t() or i18n.t() call. Avoid template literals or variable keys.","message":"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.","severity":"gotcha","affected_versions":"all"},{"fix":"Set 'ignoreElements: []' in config if you want testID on all components.","message":"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.","severity":"gotcha","affected_versions":"all"},{"fix":"If you need stable testID from text, ensure children are static strings or i18n function calls.","message":"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').","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Upgrade Babel to v7+ or use babel-upgrade. The plugin is designed for Babel 7.","cause":"Using a version of Babel that expects plugin functions, but the plugin exports an object (common in older Babel 6).","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)"},{"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.","cause":"The plugin encountered a node type it doesn't handle, or there's a misconfiguration causing the visitor to fail.","error":"TypeError: Cannot read properties of undefined (reading 'node')"},{"fix":"Run 'npm install babel-plugin-react-native-testid --save-dev' or 'yarn add babel-plugin-react-native-testid --dev'.","cause":"Plugin is not installed or not in node_modules.","error":"Require stack: - /path/to/project/babel.config.js ... Error: Cannot find module 'babel-plugin-react-native-testid'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}