If you are a React developer and still not using the React Testing Library, you ought to keep reading further. Sorry, we don&rsquo;t make the rules! And also, why not! It&rsquo;s simple, fun, and easiest to work with. Let&rsquo;s get started already!
React Testing Library (RTL) is a collection of utilities that helps in testing React Components without relying on the details of their implementation. This method makes refactoring easy and encourages us to use best practices for accessibility.
&nbsp;
Introduction
Testing is applicable for ensuring a reliable user experience without any errors in any functionality. In other words, testing an application makes sure that whatever functions and features that you have developed works as per your expected outcomes. Having maintainable tests makes your application robust and less error-prone.
React Testing Library is a lightweight solution used to avoid considering implementation details (how is a Component developed) and rather focus on testing the functionalities of React Components for their intended purpose. It is built on the DOM testing library. Application projects created with Create React App have the inbuilt support for React Testing Library. Otherwise, one can install it via npm as:
<pre class="language-markup"><code>npm install --save-dev @testing-library/react</code></pre>
&nbsp;
&nbsp;
 Types of Testing in React
<ul>
<li>Unit Testing: Testing a single component in a react application to check whether that component renders with the default props or not.</li>
<li>Integration Testing: This testing is based on checking the working of the family of components. For instance, if a child component updates its parent component&rsquo;s context state.</li>
<li>End to End Testing: This testing combines both Unit and Integration tests into a big test. This type of test is run in a simulated browser. While running these tests, there is no guarantee of UI. For instance, this testing can be used to test authentication flow.</li>
</ul>
&nbsp;
Clone the demo project from <a href="https://github.com/Ferin79/react-testing-library-article-demo" rel="nofollow noopener">https://github.com/Ferin79/react-testing-library-article-demo</a>
We will reference this simple react application for unit testing with React Testing Library in this article.
<img src="https://d2gdtie5ivbdow.cloudfront.net/media/images/article_images/Jaysha/react_testing_demo_project.png" alt="React testing demo project" width="1206" height="829" />
<img src="https://d2gdtie5ivbdow.cloudfront.net/media/images/article_images/Jaysha/react_testing_demo_project_2.png" alt="React testing demo project" width="1207" height="828" />
&nbsp;
&nbsp;
Why test with React Testing Library?
It is a simple and complete React DOM testing utility that encourages good testing practices. It provides light utility functions on the top of react-dom and react-dom/test-utils, in a way that encourages finer testing practices. React Testing Library is a tool in the Testing Frameworks category of a tech stack.
If you don&rsquo;t want to use RTL, there are alternative libraries for testing like
<ul>
<li>Enzyme</li>
<li>Cypress</li>
<li>Jest</li>
<li>Cucumber</li>
<li>JUnit</li>
</ul>
&nbsp;
Testing Header Component
In the react application that we have referenced, there is a Header component as shown below.
<img src="https://d2gdtie5ivbdow.cloudfront.net/media/images/article_images/Jaysha/react_header_component.png" alt="React header component" width="1248" height="165" />
&nbsp;This component can be tested individually by writing the following code.
&nbsp;
/tests/components/Header.test.jsx
<pre class="language-javascript"><code>import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom";
import Header from "../../components/Header";

test("render title correctly", () =&gt; {
 render(&lt;Header /&gt;);
 const titleElement = screen.getByText(/My Contacts/i);
 expect(titleElement).toBeInTheDocument();
});</code></pre>
In the above code, we are first rendering the Header component on the user screen, then we are storing the title of the element in the <code>titleElement</code> constant by getting the text on the screen. We can import the screen from the <code>@testing-library/react</code>. Lastly, we are expecting the <code>titleElement</code> to be present in the document. It is simply an assertion for testing. That is, if the text is not found in the document, then the test would fail otherwise it will pass successfully.
<img src="https://d2gdtie5ivbdow.cloudfront.net/media/images/article_images/Jaysha/react_header_test.png" alt="React Header Test" width="1248" height="513" />
This is the output of the test done by the above code. The test has passed successfully because the <code>expect</code> method returns true for verifying that the text <code>titleElement</code> is on the screen.
&nbsp;
Test Method: This method initiates the test in React and takes two arguments which are-
<ul>
<li>String: It is generally the title or unique identifier of a test. This title will be printed in the console before running the test.</li>
<li>Callback function: This is the method where the actual tests are written. After printing the string title in the console, this callback method is called.</li>
</ul>
&nbsp;
Render Method: This method renders the React component into a container that is appended to <code>document.body</code>
&nbsp;
Screen Object: The screen object is imported from <code>&lsquo;@testing-library/react&rsquo;</code> which has all the query methods which you can use to select elements from DOM. Some of the queries are shown in the following table-
<img src="https://d2gdtie5ivbdow.cloudfront.net/media/images/article_images/Jaysha/react_query_table.png" alt="React Query table" width="1227" height="814" />
This is the brief of single and multiple elements queries sourced from <a href="https://testing-library.com/docs/queries/about/#screen" rel="nofollow noopener">https://testing-library.com/docs/queries/about/#screen</a>. You can use these queries with the <code>screen</code> object to retrieve the document element(s) for testing purposes. For instance, the <code>getBy</code> query can be used to retrieve a single node from the screen.
&nbsp;
Expect method: This method is used to assert the selected elements. You can bind many assertion methods to expect method. We will discuss many assertion methods later on.&nbsp;
In the above example, we have used the<code> toBeInTheDocument</code> assertion method exported by <code>@testing-library/jest-dom</code> with <code>expect</code> method which is used to inspect whether the selected element is present in DOM or not. This method returns a boolean, that is true or false, which assists tests to either pass or fail.
Now, let&rsquo;s see the following code that fails the test.
<pre class="language-javascript"><code>import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom";
import Header from "../../components/Header";

test("Render Title Correctly", () =&gt; {
 render(&lt;Header /&gt;);
 const titleElement = screen.getByText(/Ferin Patel/i);
 expect(titleElement).toBeInTheDocument();
});
</code></pre>
The above code is the same code as the previous example that you have seen. The only difference here is in the <code>getByText</code> method that is trying to find Ferin Patel instead of My Contacts in the DOM.
<img src="https://d2gdtie5ivbdow.cloudfront.net/media/images/article_images/Jaysha/find_text_in_DOM_react.png" alt="Find text in DOM in React" width="1248" height="591" />
This test failed because we are trying to find text &lsquo;Ferin Patel&rsquo; which is not present in Header Component.
There&rsquo;s an alternative method &lsquo;It&rsquo; to the test method.
&nbsp;
It method: The it method is an alternative method to the test method. Likely, it also expects two parameters string and the callback function while executing.
<pre class="language-javascript"><code>it("Render Title Correctly by it method", () =&gt; {
 render(&lt;Header /&gt;);
 const titleElement = screen.getByText(/My Contacts/i);
 expect(titleElement).toBeInTheDocument();
});</code></pre>
<img src="https://d2gdtie5ivbdow.cloudfront.net/media/images/article_images/Jaysha/react_it_method_test.png" alt="React it method test" width="1248" height="526" />
&nbsp;
Describe method:&nbsp; When there are a lot of tests in a single file, it becomes difficult to manage all tests. So for better management of the tests, we have the <code>describe</code> method. This method helps us to organize tests. It can also be referred to as Test Suite. For instance, let&rsquo;s see the following code-
<pre class="language-javascript"><code>import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom";
import Header from "../../components/Header";

describe("Example of 'test' method and 'it' method", () =&gt; {
 test("Render Title Correctly", () =&gt; {
	render(&lt;Header /&gt;);
	const titleElement = screen.getByText(/My Contacts/i);
	expect(titleElement).toBeInTheDocument();
 });

 it("Render Title Correctly by it method", () =&gt; {
	render(&lt;Header /&gt;);
	const titleElement = screen.getByText(/My Contacts/i);
	expect(titleElement).toBeInTheDocument();
 });
});
</code></pre>
<img src="https://d2gdtie5ivbdow.cloudfront.net/media/images/article_images/Jaysha/react_it_and_test_method_test.png" alt="React it and test method for testing" width="1248" height="525" />
&nbsp;
More tests on Header
The following code shows the Header component in our referenced project.
/components/Header.jsx
<pre class="language-javascript"><code>import { Flex, Heading, Text } from "@chakra-ui/react";
import React from "react";

const Header = ({ total = 0 }) =&gt; {
 return (
	&lt;Flex
 	w="100%"
 	h="10vh"
 	background="rgba(255,255,255,0.5)"
 	borderTopRadius="2xl"
 	px="6"
 	justify="center"
 	flexDirection="column"
	&gt;
 	&lt;Heading fontSize="2xl"&gt;My Contacts&lt;/Heading&gt;
 	&lt;Text color="green.500" fontWeight="semi-bold" data-testid="total-id"&gt;
 	{total} {total &gt; 1 ? "Contacts" : "Contact"}
 	&lt;/Text&gt;
	&lt;/Flex&gt;
 );
};

export default Header;</code></pre>
&nbsp;
/tests/components/Header.test.jsx
<pre class="language-javascript"><code>describe("Count Tests", () =&gt; {
 it("Check text is plural or not", () =&gt; {
	render(&lt;Header total={256} /&gt;);
	const totalElement = screen.getByTestId("total-id");
	expect(totalElement.textContent).toBe("256 Contacts");
 });
 it("Check text is singular or not", () =&gt; {
	render(&lt;Header total={1} /&gt;);
	const totalElement = screen.getByTestId("total-id");
	expect(totalElement.textContent).toBe("1 Contact");
 });
});</code></pre>
<img src="https://d2gdtie5ivbdow.cloudfront.net/media/images/article_images/Jaysha/react_check_text_plurals_and_singular_test.png" alt="React check text is plural and singular tests" width="1248" height="537" />
&nbsp;
getByText method:&nbsp; This method is used to retrieve elements from DOM with text. It throws an error if it doesn&rsquo;t find any element or find more than 1 element.
&nbsp;
getByTestId method:&nbsp; This method is used to get elements by test ID provided to elements in a React application. You need to add<code> &lsquo;data-testid&rsquo;</code> props in relevant React Components.
&nbsp;
Fire Events
<code>&lsquo;fireEvent'</code>, which can be imported from <code>&lsquo;@testing-library/react'</code>, helps to fire any kind of event from the test code. Click event, Scroll event, Change event, Drag/Drop event, Touch event, and so on. <a href="https://github.com/testing-library/dom-testing-library/blob/main/src/event-map.js" rel="nofollow noopener">https://github.com/testing-library/dom-testing-library/blob/main/src/event-map.js</a> has a list of all the supported events.
&nbsp;
&nbsp;
Testing Home Page component
Now, let&rsquo;s test the Home Page component in the project by writing the following code in /tests/pages/Home.test.jsx
<pre class="language-javascript"><code>import { render, screen, fireEvent, waitFor } from "@testing-library/react";
import "@testing-library/jest-dom";
import Home from "../../pages/Home";

describe("Example of fire Events", () =&gt; {
 it("check if button is visible on screen", () =&gt; {
	render(&lt;Home /&gt;);
	const buttonElement = screen.getByRole("button");
	expect(buttonElement).toBeVisible();
 });

 it("click on button", async () =&gt; {
	render(&lt;Home /&gt;);
	const buttonElement = screen.getByRole("button");
	fireEvent.click(buttonElement);
	await waitFor(() =&gt; {
 	expect(buttonElement).not.toBeVisible();
	});
 });
});</code></pre>
&nbsp;
getByRole Method: The <code>getByRole</code> method queries the DOM and looks for elements with roles. Roles are the valid HTML tags such as <code>&lt;button&gt;</code>, Headings like <code>&lt;h1&gt;</code>, <code>&lt;h2&gt;</code> ..., <code>&lt;h6&gt;</code>, Anchor link <code>&lt;a&gt;</code>, <code>&lt;input&gt;</code>, Paragraph <code>&lt;p&gt;</code> etc.
&nbsp;
toBeVisible Assertion: This allows you to check if an element is currently visible to the user.
An element is visible to a user if all the following conditions are met:
<ul>
<li>it does not have its CSS property display set to none</li>
<li>it does not have its CSS property visibility set to either hidden or collapse</li>
<li>it does not have its CSS property opacity set to 0.</li>
</ul>
&nbsp;
&nbsp;
Assertion Methods
<code>toBeInTheDocument()</code>:&nbsp; This assertion method matches the expected element node in the DOM.
<pre class="language-javascript"><code>expect(element).toBeInTheDocument();</code></pre>
&nbsp;
<code>toBe()</code>:&nbsp; This assertion method checks if the text content of the expected element is the string given in the toBe method (hello in this case).
<pre class="language-javascript"><code>expect(element.textContent).toBe('hello');</code></pre>
&nbsp;
<code>toHaveLength()</code>: This matcher assertion verifies if the expected sequence (array) has the length specified in the toHaveLength method (that is 7 here).
<pre class="language-javascript"><code>expect(myArr).toHaveLength(7);</code></pre>
&nbsp;
Other such methods are:
<ul>
<li><code>toBeDisabled()</code></li>
<li><code>toBeEnabled()</code></li>
<li><code>toBeEmpty()</code></li>
<li><code>toBeEmptyDOMElement()</code></li>
<li><code>toBeInvalid()</code></li>
<li><code>toBeRequired()</code></li>
<li><code>toBeValid()</code></li>
<li><code>toBeChecked()</code></li>
<li><code>toBePartiallyChecked()</code></li>
<li><code>toHaveAttribute()</code></li>
<li><code>toHaveClass()</code></li>
<li><code>toHaveFocus()</code></li>
<li><code>toHaveFormValues()</code></li>
<li><code>toHaveStyle()</code></li>
<li><code>toHaveTextContent()</code></li>
<li><code>toHaveValue()</code></li>
<li><code>toHaveDisplayValue()</code></li>
<li><code>toHaveDescription()</code></li>
<li><code>toContainElement()</code></li>
<li><code>toContainHTML()</code></li>
</ul>
&nbsp;
&nbsp;
Conclusion
So, from the recent learning about React Testing Library, it is pretty clear that React Testing Library is the relieving solution for all the tough procedures we had to go through when dealing with the component functionalities along with its implementation details. Moreover, by learning about the various methods, it seems that RTL is very simple and straightforward to use. So, with all these features and the utilities, who wouldn&rsquo;t like to use the RTL! Lastly, there is a cheat sheet available for the same at <a href="https://testing-library.com/docs/react-testing-library/cheatsheet/" rel="nofollow noopener">https://testing-library.com/docs/react-testing-library/cheatsheet/</a>. Enjoy coding and testing!

What is the React Testing Library? - All you need to know

If you are a React developer and still not using the React Testing Library, you ought to keep reading further. Sorry, we don&rsquo;t make the rules! A