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

[](https://codecov.io/gh/reeli/react-auto-testid)
[](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.