https://github.com/anber/testid
https://github.com/anber/testid
e2e jest react react-testing-library
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/anber/testid
- Owner: Anber
- License: mit
- Created: 2019-08-14T10:17:34.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T08:43:06.000Z (over 3 years ago)
- Last Synced: 2025-02-08T15:13:57.677Z (over 1 year ago)
- Topics: e2e, jest, react, react-testing-library
- Language: TypeScript
- Size: 2.75 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Installation
```bash
npm i --save react-test-id
# or
yarn add react-test-id
```
## Configuration
By default the attribute name is `data-test-id` and the separator is `:`. The behaviour can be changed by creating new custom component and hooks.
```javascript
import { custom } from "react-test-id";
const [Role, useRole, useRoles] = custom({
attr: "data-role",
display: /\bwithRoles\b/.test(globalThis.location.search),
separator: ":",
});
export { Role, useRole, useRoles };
```
## Usage
```javascript
import React from 'react';
import { TestId, useTestId, useTestIds } from "react-test-id"; // if you use predefined configuration
import { TestId, useTestId, useTestIds } from "./custom"; // if you use your own configuration
function Title() {
const id = useTestId(":title");
return
;
}
function Actions() {
const [okId, cancelId] = useTestIds([":ok-button", ":cancel-button"]);
return (
Ok
Cancel
);
}
function Modal() {
return (
{id => (
)}
)
}
```
`Modal` component above generates next markup:
```HTML
```