https://github.com/jamiebuilds/react-markers

Add markers to your React components for easy testing with actual DOM elements
https://github.com/jamiebuilds/react-markers

dom react selenium testing

Last synced: 12 days ago
JSON representation

Add markers to your React components for easy testing with actual DOM elements

• Host: GitHub
• URL: https://github.com/jamiebuilds/react-markers
• Owner: jamiebuilds
• License: mit
• Created: 2017-06-05T22:15:22.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-04-04T21:13:13.000Z (over 6 years ago)
• Last Synced: 2024-09-23T12:08:17.532Z (about 2 months ago)
• Topics: dom, react, selenium, testing
• Language: JavaScript
• Size: 52.7 KB
• Stars: 79
• Watchers: 4
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-markers

> Add markers to your React components for easy testing with actual DOM elements

## Installation

```sh

yarn add react-markers

```

## Usage

Create static elements to use in your component, and export them from your

module.

```js

// ConfirmPage.js

import marker from 'react-markers';

export const confirmForm = marker();

export const confirmButton = marker();

export default function ConfirmPage() {

  return (

    

      
Confirm action

      
This will perform an action

      Submit

    

  );

}

```


Then in your tests, you can use `find()` and `findAll()` to lookup these

markers from the DOM.

```js

// ConfirmPage.test.js

import { render } from 'react-dom';

import ConfirmPage, { confirmForm, confirmButton } from './ConfirmPage';

import marker from 'react-markers';

const container = document.getElementById('test-container');

render(, container);

let form = marker.find(container, confirmForm); // 

let btn = marker.find(form, confirmButton); // 

```

Be sure that `process.env.NODE_ENV` is set to `"test"` when running your tests.

## API

#### `marker()`

In test environments this returns an object of props to pass to your DOM

elements. In other environments it returns `null`.

```js

export const myButton = marker();

export default function MyButton() {

  return ;

}

```

#### find(element, marker)

`element` is a DOM element and `marker` is the value returned by `marker()`.

It returns either the matched DOM element or `null`.

```js

import MyButton, { myButton } from './MyButton';

render(, container);

findAll(container, myButton); // HTMLElement | null

```

#### findAll(element, marker)

`element` is a DOM element and `marker` is the value returned by `marker()`.

It returns a `NodeList`.

```js

import MyButton, { myButton } from './MyButton';

render(, container);

findAll(container, myButton); // NodeList

```