react-markers

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

Usage no npm install needed!

<script type="module">
  import reactMarkers from 'https://cdn.skypack.dev/react-markers';
</script>

README

react-markers

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

Installation

yarn add react-markers

Usage

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

// ConfirmPage.js
import marker from 'react-markers';

export const confirmForm = marker();
export const confirmButton = marker();

export default function ConfirmPage() {
  return (
    <form onSubmit={...} {...confirmForm}>
      <h1>Confirm action</h1>
      <p>This will perform an action</p>
      <button type="submit" {...confirmButton}>Submit</button>
    </form>
  );
}

Then in your tests, you can use find() and findAll() to lookup these markers from the DOM.

// 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(<LoginPage/>, container);

let form = marker.find(container, confirmForm); // <form>
let btn = marker.find(form, confirmButton); // <button type="submit">

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.

export const myButton = marker();
export default function MyButton() {
  return <button {...myButton}/>;
}

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.

import MyButton, { myButton } from './MyButton';
render(<MyButton/>, 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.

import MyButton, { myButton } from './MyButton';
render(<MyButton/>, container);
findAll(container, myButton); // NodeList