Babel plugin for auto adding test ids and accessibility labels to react native apps

Description | Install | Usage | How it works ?

Description

This babel plugin is intended to be used on legacy react native applications which were not build with testing and accessibility in mind. It adds testID and accessibilityLabel props to all of the <Text/> nodes, in order for these elements to be selectable with autiomation tools (e.g. appium). This plugin by no means is intended to add accessibility to existing applications, please don't use it on production builds, only on qa/dev ones.

Please bear in mind, if you are building a react native application from scratch refrain from using this plugin and try to add proper accessibility rules for your app, this makes your app usable for people with disabilities.

Install

npm:

npm install --save-dev babel-plugin-rn-add-testid

yarn:

yarn add babel-plugin-rn-add-testid --dev

Usage

babel.config.js

module.exports = {
  plugins: [
    'rn-add-testid'
  ]
}

By default the plugin parses only <Text /> components, if you want it to parse other component names you can provide a list of component names to parse in your babel config:

module.exports = {
  plugins: [
    ['rn-add-testid', { components: ['Text', 'H1', 'H2', 'MyText'] }]
  ]
}

How it works

The plugin parses the contents of the <Text/> node and adds its value(s) as testID and accessibilityLabel props. If the <Text/> node already has one of these props, it doesn't do anything.

in:

<Text>Big brown fox</Text>

out:

<Text
  testID="big_brown_fox"
  accessibilityLabel="big_brown_fox"
>
  Big brown fox
</Text>

---

in:

<Text>{value}</Text>

out:

<Text
  testID={value}
  accessibilityLabel={value}
>
  {value}
</Text>

---

in:

<Text>Big brown fox {value}</Text>

out:

<Text
  testID={`big_brown_fox_${value}`}
  accessibilityLabel={`big_brown_fox_${value}`}
>
  Big brown fox {value}
</Text>

---

in:

<Text
  testID="myID"
  accessibilityLabel="My Label"
>
  Big brown fox
</Text>

out:

<Text
  testID="myID"
  accessibilityLabel="My Label"
>
  Big brown fox
</Text>

---

in:

<Text />

out:

<Text testID="unknown-0" accessibilityLabel="unknown-0" />