React Js Cheat Sheet

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

React Js Cheat Sheet Example
React Js Cheat Sheet Excel
React Js Cheat Sheet Download

React.js Cheatsheet (Devhints) View: React Cheat Sheet (ReactCheatSheet.com) View: React Cheat Sheet (PDF) (ihatetomatoes) View: 10 Super-Useful React Components, Libraries & Tools (Speckyboy) View: React JS Crash Course (Traversy Media) View: ReactJS For Beginners (Andrew Ray) View: React Lifecycle Cheatsheet (Monica Olinescu) View. A javascript libra ry for building user interfaces. React Cheat Sheet DEMO: GITHUB: https://github.com/facebook/react. In React, prop types are set as a static property (.propTypes) on a component class or a function component.propTypes is an object with property names matching the expected props and values matching the expected value of that prop type.

renderconst {/* */} = 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 thereis no need to pass a node as the first argument (usually, you can use thescreen import instead)

import{ render, fireEvent, screen }from'@testing-library/react'

test('loads items eventually',async()=>{

React Js Cheat Sheet Example

fireEvent.click(getByText('Load'))

// Wait for page to update with query text

const items =await screen.findAllByText(/Item #[0-9]: /)

})

Queries#

Difference from DOM Testing Library Knives out drive in.

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

Tiny books pro. Apps on mac for instagram dms. See Which query should I use?

No Match	1 Match	1+ Match	Await?
getBy	throw	return	throw	No
findBy	throw	return	throw	Yes
queryBy	null	return	throw	No
getAllBy	throw	array	array	No
findAllBy	throw	array	array	Yes
queryAllBy	[]	array	array	No

ByLabelText find by label or aria-label text content
- getByLabelText
- queryByLabelText
- getAllByLabelText
- queryAllByLabelText
- findByLabelText
- findAllByLabelText
ByPlaceholderText find by input placeholder value
- getByPlaceholderText
- queryByPlaceholderText
- getAllByPlaceholderText
- queryAllByPlaceholderText
- findByPlaceholderText
- findAllByPlaceholderText
ByText find by element text content
- getByText
- queryByText
- getAllByText
- queryAllByText
- findByText
- findAllByText
ByDisplayValue find by form element current value
- getByDisplayValue
- queryByDisplayValue
- getAllByDisplayValue
- queryAllByDisplayValue
- findByDisplayValue
- findAllByDisplayValue
ByAltText find by img alt attribute
- getByAltText
- queryByAltText
- getAllByAltText
- queryAllByAltText
- findByAltText
- findAllByAltText
ByTitle find by title attribute or svg title tag
- getByTitle
- queryByTitle
- getAllByTitle
- queryAllByTitle
- findByTitle
- findAllByTitle
ByRole find by aria role
- getByRole
- queryByRole
- getAllByRole
- queryAllByRole
- findByRole
- findAllByRole
ByTestId find by)
configure change global options:configure({testIdAttribute: 'my-data-test-id'})
cleanup clears the DOM (use with afterEach to resetDOM between tests)

Text Match Options#

Given the following HTML:

React Js Cheat Sheet Excel

Will find the div:

getByText('Hello World')// full string match

getByText('llo Worl',{ exact:false})// substring match

getByText('hello world',{ exact:false})// ignore case

React Js Cheat Sheet Download

// Matching a regex:

getByText(/world/i)// substring match, ignore case

getByText(/^hello world$/i)// full string match, ignore case

getByText((content, element)=> content.startsWith('Hello'))