What is React Testing Library (RTL)?

React Testing Library, referred to going forward as RTL, is a type of unit test specifically for React applications. The goal of the library is to help you write tests that resemble how a user would use your application.

Why do we test?

Testing ensures a product or application performs the way it is intended. Testing is important for discovering defects/bugs before the delivery to the client. Thoroughly tested software ensures reliable, quality, and high-performance software operation. Additional reasons to test are as follows:

• saves the company money: in case you find any bugs in the early phases, fixing them costs a reduced amount of money.
• security: the more test a specified product undergoes, the more reliable a product a client can expect.

What is Jest?

Jest is a test runner that finds tests, runs the tests, and determines whether the tests passed or failed. Additionally, Jest offers functions for test suites, test cases, and assertions.

The anatomy of a RTL test block

1 import { render, screen } from "@testing-library/react";
2 import App from "./App";
3
4 // start of test block
5 test('renders learn react link', () => {
6  render(<App />);
7   const linkElement = screen.getByText(/learn react/i);
8   expect(linkElement).toBeInTheDocument();
9 });
10 // end of test block

Anatomy breakdown

• line 1
  • screen looks at the component we rendered. It contains multiple methods that allow us to get certain elements we want from the component that we rendered
• line 5: describes what the test block is testing for, then calls a callback function that contains the test to be executed
• line 6: specifies which component to render for testing (tip: make sure to import that component first as seen in line 2)
• line 7: specifies which elements within the specified component to interact with for the purpose of this test. In this example, we are targeting the link element with the "learn react" text
• line 8: assert that the results are as expected. In this example, we expect the link to be in the document

note: 90% of the time you'll be using the .getBy methods

Priorities

accessible to everyone

• .getByRole - the role of the element (heading, button, etc)
• .getByLabelText - for forms
• .getByPlaceholderText
• .getByTet

semantic queries (read by screen readers)

• .getByAltText
• .getByTitle

test ID

• .getByTestId - last resort if none of the above can target the element needed to test

Assertions

• describe block

  The describe block groups and organizes common tests.

Best practices