Cheat Sheet React

React

React Cheat Sheet 2021
Cheat Sheet React Native

The JavaScript library react-dom, sometimes called ReactDOM, renders JSX elements to the DOM by taking a JSX expression, creating a corresponding tree of DOM nodes, and adding that tree to the DOM. The code example begins with ReactDOM.render. React Cheat Sheet. Req uir edFunc: React.P ro pTy pes.fu nc.i sR equ ired, req uir edAny: React.P ro pTy pes.an y.i sRe quired, // primit ives, optional by default.

Ever since I started using TypeScript, I can't stop using it. Sometimes finding the correct type and where you should import it from can be a real headache. Especially when building a ReactJS application. This blog post is a great chance to publicly document my most used React TypeScript types. I focus on functional components and react hooks.
The structure of the article is that each paragraph is a standalone tip.

To create a React TypeScript project, we can use Create React App:

There have been lots of talks about the right way to import React. This is the most updated way to do it:

The return type of a functional component is ReactElement

If you want to extend the props of a native HTML element, you can use the generic class HTMLAttributes. Let's say I want to create a new button:

Note that we use destructuring to forward the props to the button element.

The children prop is of type ReactNode.

React's events system uses its own types and not the native HTML events. Make sure to import the event from the react library. import { MouseEvent } from 'react'.

Pass the correct type to the useRef generic. If you want to create a ref to an input element:

The ref.current type will automatically be HTMLInputElement.

The same goes for useState.

If you provide an initial value in both cases, the type will be inferred implicitly.

When creating custom hooks make sure to explicitly set the returns type. Otherwise, TypeScript may infer incorrectly the types.

This is far from being a complete cheat sheet but rather documents the things I use the most. Check out this awesome cheat sheet for more information: https://github.com/typescript-cheatsheets/react.

‍

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

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()=>{

fireEvent.click(getByText('Load'))

// Wait for page to update with query text

React Cheat Sheet 2021

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

})

Queries#

Difference from DOM Testing Library

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')

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)

Cheat Sheet React Native

Text Match Options#

Given the following HTML:

Will find the div:

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

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

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

// 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'))