Jest and React Testing App

Jest is a JavaScript testing framework that is commonly used for testing React applications. It is developed by Facebook and designed to work seamlessly with React. Jest is known for its simplicity, speed, and powerful features.

When it comes to testing React applications, Jest is often used in combination with React Testing Library. React Testing Library is a set of utilities that encourages writing tests that focus on the behavior of the application from the user's perspective. It is built on top of DOM Testing Library and provides a set of functions for interacting with React components in a way that simulates how users would interact with the application.

The relationship between React Testing Library and Jest can be summarized as follows:

Jest as the Test Runner: Jest is used as the underlying test runner that executes your test suites. It provides features like test parallelization, test coverage, and a watch mode.

Jest Matchers and Expectations: Jest comes with a set of built-in matchers and expectations that make it easy to write assertions in your tests. These can be used to assert the expected behavior of your React components.

React Testing Library for Testing React Components: React Testing Library is a testing utility that works well with Jest and helps you write tests that focus on the rendered output of your components. It provides a set of queries and helpers to interact with components and assert their behavior.

Snapshot Testing: Jest includes a feature called snapshot testing, which allows you to capture the rendered output of a component and compare it against a previously stored snapshot. This can be useful for detecting unexpected changes in the UI.

Here's a simple example of a Jest test using React Testing Library:

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

test('renders the Example component', () => {
  render(<Example />);
  // Use queries from React Testing Library to assert the component's behavior
  expect(screen.getByText('Hello, World!')).toBeInTheDocument();
});

In this example, Jest is the test runner, and React Testing Library (@testing-library/react) is used for rendering the React component and making assertions about its behavior. The combination of Jest and React Testing Library is a popular choice for testing React applications due to their simplicity and effectiveness.

https://github.com/testing-library/jest-dom#tohavetextcontent
https://testing-library.com/docs/queries/about/#priority

Priority

Based on the Guiding Principles, your test should resemble how users interact with your code (component, page, etc.) as much as possible. With this in mind, we recommend this order of priority:

Queries Accessible to Everyone Queries that reflect the experience of visual/mouse users as well as those that use assistive technology.

• getByRole: This can be used to query every element that is exposed in the accessibility tree. With the name option you can filter the returned elements by their accessible name. This should be your top preference for just about everything. There's not much you can't get with this (if you can't, it's possible your UI is inaccessible). Most often, this will be used with the name option like so: getByRole('button', {name: /submit/i}). Check the list of roles.
• getByLabelText: This method is really good for form fields. When navigating through a website form, users find elements using label text. This method emulates that behavior, so it should be your top preference.
  getByPlaceholderText: A placeholder is not a substitute for a label. But if that's all you have, then it's better than alternatives.
• getByText: Outside of forms, text content is the main way users find elements. This method can be used to find non-interactive elements (like divs, spans, and paragraphs).
• getByDisplayValue: The current value of a form element can be useful when navigating a page with filled-in values.

Semantic Queries HTML5 and ARIA compliant selectors. Note that the user experience of interacting with these attributes varies greatly across browsers and assistive technology.

• getByAltText: If your element is one which supports alt text (img, area, input, and any custom element), then you can use this to find that element.
  getByTitle: The title attribute is not consistently read by screenreaders, and is not visible by default for sighted users

Test IDs

• getByTestId: The user cannot see (or hear) these, so this is only recommended for cases where you can't match by role or text or it doesn't make sense (e.g. the text is dynamic).