https://github.com/reeli/react-auto-testid

Automatically add test id for react components
https://github.com/reeli/react-auto-testid

Last synced: 4 months ago
JSON representation

Automatically add test id for react components

• Host: GitHub
• URL: https://github.com/reeli/react-auto-testid
• Owner: reeli
• Created: 2021-10-28T14:38:58.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-11-01T15:08:28.000Z (over 3 years ago)
• Last Synced: 2024-05-27T21:17:25.880Z (about 1 year ago)
• Language: TypeScript
• Size: 242 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Auto Testid

![Build Status](https://github.com/reeli/react-auto-testid/actions/workflows/deploy.yml/badge.svg)

[![codecov](https://codecov.io/gh/reeli/react-auto-testid/branch/master/graph/badge.svg?style=flat-square)](https://codecov.io/gh/reeli/react-auto-testid)

[![License](https://img.shields.io/npm/l/react-auto-testid.svg?style=flat-square)](https://npmjs.org/package/react-auto-testid)

React Auto Testid is a babel preset which helps you generate test id for react components automatically.

## Install

1. Use it in babel config:

```json

{

  "presets": ["react-auto-testid/babel-preset"]

}

```

2. Open your terminal and run the following command to generate the config file:

```shell

npx testid

```

## How to use?

1. Define `testid-root` in react element, and then every child below this element will get the key as prefix if the child element contains `role` or `name` attribute.

```tsx

// in your code



   
text



// after render



  
text



```


## Best Practice

1. Define `testid-root` in page level in order to better maintain. Normally one `testid-root` for one page is enough.

   

2. The `data-testid` is generated automatically, it's better to only use in e2e, because it will not display in code, so it's better to use `role` or `name` as selector in your unit test.