Cheatsheet

Get the printable cheat sheet

A short guide to all the exported functions in React Testing Library

• render const {/* */} = render(Component) returns:

  • unmount function to unmount the component

  • container reference to the DOM node where the component is mounted

  • all the queries from DOM Testing Library, bound to the document so there is no need to pass a node as the first argument (usually, you can use the screen import instead)

Queries

Difference from DOM Testing Library

The queries returned from render in React Testing Library are the same as DOM Testing Library except they have the first argument bound to the document, so instead of getByText(node, 'text') you do getByText('text')

See Which query should I use?

• ByLabelText find by label or aria-label text content

  • getByLabelText

  • queryByLabelText

Async

The dom-testing-library Async API is re-exported from React Testing Library.

• waitFor (Promise) retry the function within until it stops throwing or times out

• waitForElementToBeRemoved (Promise) retry the function until it no longer returns a DOM node

Events

See Events API

• fireEvent trigger DOM event: fireEvent(node, event)

• fireEvent.* helpers for default event types

  • click

Other

See Querying Within Elements, Config API, Cleanup,

• within take a node and return an object with all the queries bound to the node (used to return the queries from React Testing Library's render method): within(node).getByText("hello")

• configure change global options: configure({testIdAttribute: 'my-data-test-id'})

Text Match Options

Given the following HTML:

Will** find the div:**