https://github.com/anber/testid

https://github.com/anber/testid

e2e jest react react-testing-library

Last synced: 10 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/anber/testid
• Owner: Anber
• License: mit
• Created: 2019-08-14T10:17:34.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T08:43:06.000Z (almost 2 years ago)
• Last Synced: 2024-10-14T11:05:22.993Z (24 days 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



    


    


        

        

    



```