babel-plugin-autotest

Usage

Add babel-plugin-autotest to plugin list in .babelrc. For example:

{
    presets: ['react'],
    env: {
        test: {
            plugins: [
                'autotest',
            ],
        },
    },
}

Use get function to build any css selector by React Components.

import {get} from 'babel-plugin-autotest'

import MyComponent from './MyComponent'
import MyButton from './MyButton'

/**
 * [data-dadad] [data-czczx]
 */
console.log(get`${MyComponent} ${MyButton}`)

/**
 * .myClassName > [data-czczx]
 */
console.log(get`.myClassName > ${MyButton}`)

How it works

This plugin tries to find all React Component declarations and to add data-{hash} attribute with the uniq hash-id to the Component's root node. It also saves this hash as the static property for the Component, so get function uses this property to build a selector.