@tokencard/babel-plugin-jsx-hierarchical-test-ids

babel-plugin-jsx-hierarchical-test-ids

This babel plugin enables you to easily generate hierarchical testID prop values for use with React Native testing frameworks such as detox.

Example

import React from 'react'
import { View } from 'react-native'

export default () => (
  <View testID='welcomeScreen'>
    <View testID='.topLayer'>
      <View>
        <View>
          <View testID='.section1' />
        </View>
      </View>
    </View>
    <View>
      <View testID='navBar'>
        <View testID='.left' />
      </View>
    </View>
  </View>
)

Gets transformed to:

import React from 'react'
import { View } from 'react-native'

export default () => (
  <View name='name1' testID='welcomeScreen'>
    <View name='name2' testID='welcomeScreen.topLayer'>
      <View>
        <View>
          <View name='blahblah' testID='welcomeScreen.topLayer.section1' />
        </View>
      </View>
    </View>
    <View>
      <View name='name2' testID='navBar'>
        <View name='blahblah' testID='navBar.left' />
      </View>
    </View>
  </View>
)

Any testID value prefixed with . will have its ancestor's values prefixed to it in the resulting output.

This enables you to easily generate unique testID values based on your JSX component hierarchy, whilst still allowing you to skip this functionality when needed (see navBar above).

Installation

npm i --save-dev @tokencard/babel-plugin-jsx-hierarchical-test-ids

Usage

Add to your babel config:

{
  "plugins": [ "@tokencard/babel-plugin-jsx-hierarchical-test-ids" ]
}

If you wish to customize the prefix operator (default is .) you can do so:

{
  "plugins": [
    [
      "@tokencard/babel-plugin-jsx-hierarchical-test-ids",
      { prefixOperator: "_" } /* use _ instead of . */
    ]
  ]
}

Dev guide

To run the tests:

yarn test

## License

MIT