React Jest Notes

react-jest-notes.md

React Jest Notes

Jest Function Library: QUERY + ARIA

QUERIES

Function	Purpose	Throws Error on No Match	Returns null on No Match	Matches Single Element	Matches Multiple Elements	Resolves Promise on Match
getBy	Select a single element by a specific query	Yes	No	Yes	No	N/A
getAllBy	Select multiple elements by a specific query	Yes	No	No	Yes	N/A
queryBy	Search for a single element by a query	No	Yes	Yes	No	N/A
queryAllBy	Search for multiple elements by a query	No	Yes	No	Yes	N/A
findBy	Asynchronously find a single element	No	Yes	Yes	No	Yes
findAllBy	Asynchronously find multiple elements	No	Yes	No	Yes	Yes

Explain return and throw

In the context of the given table:

• "return" means that the corresponding function will return a value or a set of values.
• "throw" means that the corresponding function will throw an error if no matching element(s) are found.

It doesn't directly translate to "true" and "false" but rather indicates the behavior of the function when searching for elements:

• If a function is specified to "return" when there is a match, it will return the found element(s) or an array-like structure containing the found element(s). This indicates a successful search.
• If a function is specified to "throw" when there is no match, it means that if no matching element(s) are found, it will throw an error. This indicates that the search was unsuccessful.

The terms "return" and "throw" describe the behavior or outcome of the function call in terms of returning values or throwing errors, rather than directly representing "true" and "false" results.

Explain await column

In the context of the given table:

• "Await" refers to whether the corresponding function supports asynchronous behavior and requires awaiting the result.
• When "Await?" is marked as "Yes," it indicates that the function is asynchronous, and you need to await its resolution or handle the promise returned by the function.
• When "Await?" is marked as "No," it indicates that the function is synchronous, and you can directly use the returned value or handle any errors synchronously without the need for awaiting or handling promises.

The "Await?" column indicates whether the function call should be awaited or can be used synchronously based on the nature of the function's behavior. It is related to the usage of promises and asynchronous programming rather than directly representing "true" or "false" values.

ARIAS

ARIA roles define element purpose and structure. They ensure accurate interpretation by assistive technologies (i.e. screenreaders). full list here

ARIA role	HTML elements
heading	h1, h2, h3, h4, h5, h6
list	ui, li
button	button
link	a
textbox	input, type="text"
form	input, textarea, option

QUERY + ARIA

Functions	Description
screen.getByRole('heading') screen.getAllByRole('textbox')	screen.getByRole('heading') returns a single heading element (the first one it can find), while screen.getAllByRole('heading') returns an array-like structure with multiple heading elements (every heading element it can find). True if found, false if not found.
screen.findByTitle() screen.findAllByTitle()	// Scenario: A single element with matching title exists const element = screen.findByTitle('Example Title'); // Scenario: Multiple elements with matching title exist const elements = screen.findAllByTitle('Example Title');
screen.queryByLabelText() screen.queryAllByLabelText()	desc

Utility functions and objects

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

screen: A utility object that provides an alias for various query functions to interact with rendered components during testing.

render: A function that renders React components in a virtual DOM for testing purposes and returns a set of utilities to interact with the rendered components.

fireEvent: An object that contains functions to simulate events like clicks, typing, and submitting on elements to test component behavior.

waitFor: A utility function used to wait for specific conditions to be met during testing, often used for testing asynchronous operations or components.

act: A utility function used to perform actions in a synchronous and batched manner, ensuring all updates triggered by tests are properly applied before making assertions.

cleanup: A function used to clean up and unmount components after each test, preventing memory leaks.

getByLabelText: A query function that finds an element by its associated label text.

getByText: A query function that finds an element by its visible text content.

getByTestId: A query function that finds an element by its data-testid attribute.

queryByTestId: A query function that finds an element by its data-testid attribute, returning null if not found.

getAllByTestId: A query function that finds multiple elements by their data-testid attribute.

queryByText: A query function that finds an element by its visible text content, returning null if not found.

queryAllByText: A query function that finds multiple elements by their visible text content.

getByPlaceholderText: A query function that finds an input element by its placeholder text.

queryByPlaceholderText: A query function that finds an input element by its placeholder text, returning null if not found.

getByAltText: A query function that finds an element by its alt attribute.

queryByAltText: A query function that finds an element by its alt attribute, returning null if not found.

getByRole: A query function that finds an element by its role attribute (e.g., 'button', 'heading', 'checkbox').

queryByRole: A query function that finds an element by its role attribute (e.g., 'button', 'heading', 'checkbox'), returning null if not found.

getByTitle: A query function that finds an element by its title attribute.

queryByTitle: A query function that finds an element by its title attribute, returning null if not found.

getByDisplayValue: A query function that finds an input element by its displayed value.

queryByDisplayValue: A query function that finds an input element by its displayed value, returning null if not found.

within: A function to narrow the scope of queries to a specific container.

waitForElementToBeRemoved: A utility function used to wait for an element to be removed from the DOM.