babel-plugin-jsx-property-alias

2.0.0 verified Sat Apr 25 auth: no javascript maintenance

Babel plugin for aliasing JSX properties, primarily used to map testID to accessibilityLabel for React Native Appium testing. Current stable version is 2.0.0 (2018). Low release cadence; primarily a utility for QA builds. Key differentiator: it solves a specific React Native + Appium incompatibility without polluting production code, and supports environment whitelisting via ALIAS_ENVIRONMENT variable. Alternatives: manual testID duplication, but this plugin automates the transform.

Common errors

error Error: Cannot find module 'babel-plugin-jsx-property-alias' ↓

cause Plugin not installed or not in node_modules.

fix

Run 'npm install --save-dev babel-plugin-jsx-property-alias'

error TypeError: Cannot read property 'properties' of undefined ↓

cause Missing options object when adding plugin to Babel config.

fix

Use array syntax: ["jsx-property-alias", { "properties": { ... } }]

Warnings

breaking Version 2 changed options format. Old v1 option names and structure no longer work. ↓

fix Use the new 'properties' object instead of 'from'/'to' arrays. See README for v2 API.

gotcha Plugin replaces existing accessibilityLabel if present; no merging. ↓

fix Ensure that components do not have both testID and accessibilityLabel set manually, or accept that testID will overwrite.

gotcha React Native does not respect BABEL_ENV by default; you must use ALIAS_ENVIRONMENT env var or the includeInEnvironments option. ↓

fix Set ALIAS_ENVIRONMENT to 'appium' (or your custom env name) in your React Native build scripts.

Install

npm install babel-plugin-jsx-property-alias

yarn add babel-plugin-jsx-property-alias

pnpm add babel-plugin-jsx-property-alias

Imports

default

wrong

// Incorrect: using plugin without array notation
{
  "plugins": ["jsx-property-alias"]
}

correct

// In .babelrc or babel.config.js:
{
  "plugins": [
    ["jsx-property-alias", { "properties": { "testID": "accessibilityLabel" } }]
  ]
}

Plugin must be configured with options in a nested array. Options are required: at least 'properties' key.

require

wrong

import plugin from 'babel-plugin-jsx-property-alias'; // ESM not supported in commonjs babel configs

correct

const plugin = require('babel-plugin-jsx-property-alias');

This package is CJS-only; use require() in Node.js. There is no default export.

BABEL_ENV
wrong
```
NODE_ENV=appium babel src --out-dir build // Plugin relies on BABEL_ENV, not NODE_ENV
```
correct
```
BABEL_ENV=appium babel src --out-dir build
```
Plugin uses process.env.BABEL_ENV by default to decide whether to transform. Overridable via includeInEnvironments option and ALIAS_ENVIRONMENT variable.

Quickstart

Configures Babel to replace testID with accessibilityLabel when BABEL_ENV is set to 'appium'.

// Install: npm install --save-dev babel-plugin-jsx-property-alias

// .babelrc
{
  "env": {
    "appium": {
      "plugins": [
        ["jsx-property-alias", {
          "properties": {
            "testID": "accessibilityLabel"
          }
        }]
      ]
    }
  }
}

// Then run:
BABEL_ENV=appium babel src --out-dir build

// Input: <View testID="my_button" />
// Output: <View testID="my_button" accessibilityLabel="my_button" />