Scribd
Upload
923 views1 page

Cheat Sheet PDF

This document provides a cheat sheet for using the react-testing-library for testing React components. It outlines the main utilities for rendering components, querying the DOM, firing events, waiting for elements, and cleaning up after tests. Key methods include render() to render components, getBy/queryBy/findBy to search for elements, fireEvent() to simulate user events, wait() to wait for elements to appear, and debug() to pretty print the DOM.

Uploaded by

Gonçalo Rações
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
923 views1 page

Cheat Sheet PDF

This document provides a cheat sheet for using the react-testing-library for testing React components. It outlines the main utilities for rendering components, querying the DOM, firing events, waiting for elements, and cleaning up after tests. Key methods include render() to render components, getBy/queryBy/findBy to search for elements, fireEvent() to simulate user events, wait() to wait for elements to appear, and debug() to pretty print the DOM.

Uploaded by

Gonçalo Rações
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

React Testing Library Simple and complete cheat sheet v1

github.com/kentcdodds/react-testing-library

render a component search variants (return value) wait for appearance

import {render} from ‘react-testing-library’ getBy Element or Error test('movie title appears', async () => {
// Element is initially not present...
getAllBy Element[] or Error expect(() => getByText(‘aladdin’)).toThrow()
// See render result for more details…
const result = render(<MyComponent />)
queryBy Element or null // Wait for appearance
await wait(() => {
queryAllBy Element[] or [] expect(getByText(‘aladdin’)).toBeTruthy()
})
search the DOM
findBy Promise<Element> or Error
// Wait for appearance and return the result
const {getByText} = render(<span>hello</span>) findAllBy Promise<Element[]> or Error await waitForElement(() => getByText(‘aladdin’))
})

// Check out jest-dom on npm for handy assertions…


const element = getByText(‘hello’)
search types (DOM attribute)
assert for absence
LabelText <label for=“element” />
expect(queryByText('submit')).toBeNull()
fire an event
PlaceholderText <input placeholder=“username” />

import {fireEvent} from ‘react-testing-library’


Text <a href="/about">About</a> the render result (description)
fireEvent.click(element)
AltText <img alt=“movie poster” />
// Or you can fire events manually with… container The target of ReactDOM.render()
fireEvent(element, new MouseEvent(‘click’) Title <span title="Delete" /> or <title />
baseElement App wrapper (usually <body> tag)
DisplayValue Current value of input element
debug(element) Pretty print the DOM
pretty print the DOM Role <div role="dialog">...</div>
unmount() Unmount your component
TestId <input data-testid="username-input" />
const {debug} = render(<div>hello</div>)
rerender(ui) Render again at the container

// Pretty print the DOM tree of your render …queries Queries for the baseElement
debug() text matches
❌
✅
const {getByText} = render(<div>Hello World</div>) cleanup the DOM
wait for something
getByText('Goodbye World’) // import ‘react-testing-library/cleanup-after-each’

import {wait} from ‘react-testing-library’


getByText(/hello world/) // // Or, for more control…
getByText(‘ello Worl’, {exact: false}) // import {cleanup} from ‘react-testing-library’
// Retry search every 50ms for 4500ms
wait(() => getByText(‘async result’)) getByText(‘Hello World’) //
afterEach(cleanup)

You might also like