react-get-data-cy

Helper function provides a data-cy testing attribute with a value that can match the text content of the react element.

Demo

CodeSandbox

Motivation

I wanted to have a dynamic data-cy testing attribute that can be based on children passed to react element. This package supports string, JSX.Element and ReactNode as value i.e. second argument.

Getting started

To use this package, you only need to install this dependency, import it and invoke the getDataCy function, e.g.:

import { getDataCy } from '@lukaspolak/react-getDataCy'

export const FancyComponent: FC = ({ children }) => {
  return <div {...getDataCy('fancy component', children)}>{children}</div>
}

Install

npm install @lukaspolak/react-get-data-cy

yarn add @lukaspolak/react-get-data-cy

Documentation

This package works well with babel-plugin-react-remove-properties. To configure it, update .babelrc file.

{
  //...
  "env": {
    "production": {
      "plugins": [["react-remove-properties", { "properties": ["data-cy"] }]]
    }
  }
  //...
}

Contributing

Please read the Contribution guidelines to start with your awesome contributions!

Why the library is prefixed with `@lukaspolak/`

There are a lot of similar libraries/packages on GitHub and npm, that can do the same. I wanted to enhance my programming skills, and I didn't want to find a unique name for the package.

INITIALIZATION TODO

remove INITIALIZATION TODO section
replace quoted text in README.md file

LukasPolak/react-get-data-cy