Registry / testing / babel-plugin-react-native-testid

babel-plugin-react-native-testid

library0.2.1jsnpmunverified

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.

testing

npm install babel-plugin-react-native-testid

package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-REACT

babel-plugin-react-native-testid

testingjavascriptv0.2.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default (plugin)

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

✗ // Wrong: trying to import as a module in app code import plugin from '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.

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>

Debug

Known issues

breakingVersion 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.

affects: <0.2.0

breakingVersion 0.2.0 removed support for Node.js <10 (engine field update).

fix

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

affects: <0.2.0

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

fix

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

affects: <0.2.0

gotchaPlugin 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.

affects: all

gotchaThe 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.

affects: all

gotchaWhen 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.

affects: all

Errors

Common errors & fixes

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)

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.

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

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.

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

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

Upgrade

Version history

0.2.1latest on npm

Audit

Dependencies

@babel/corerequiredRequired as a peer dependency for Babel plugin functionality

Agent activity

18 hits · last 30 days

node

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/babel-plugin-react-native-testid ↗