Blog

React Testing Library

Here in this blog, we are going to learn about React Testing Library.

React Testing Library is a testing utility that allows you to write tests that simulate user interactions with your components. It provides a simple and intuitive API for querying and interacting with your components and makes it easy to test the behavior of your user interface.
React Testing Library is built on top of the DOM Testing Library, which is a library for testing web applications that provides a set of utilities for interacting with the DOM.

Using React Testing Library

To use the React Testing Library in your React application, you first need to install it:

npm install --save-dev @testing-library/react

Here’s an example of a test for a simple counter component:

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('increments the counter when the button is clicked', () => {
const { getByText } = render(<Counter />);
const button = getByText('Click me');
const count = getByText('Count: 0');

fireEvent.click(button);

expect(count).toHaveTextContent('Count: 1');
});

In this test, we are rendering a Counter component, and then using the getByText utility from React Testing Library to get a reference to the button and the count element in the component.
We then simulate a click on the button using the fire Event utility and check that the count has been incremented to 1.
It provides a wide range of utilities for interacting with your components, including getByTestId, getByLabelText, and getByRole, which allow you to query your components based on different attributes.

Conclusion

React applications may be tested with the help of the robust and user-friendly React Testing Library. By using the React Testing Library to write tests for your components, you can ensure that your user interface is working as expected, and catch bugs before they make it into production.

import React from 'react';
import { render } from '@testing-library/react';

function Example(props) {
return (
<div>
<h1>{props.title}</h1>
<p>{props.description}</p>
</div>
);
}

test(‘renders component with props’, () => {
const { getByText } = render(
<Example title=”Title” description=”Description” />
);

expect(getByText(/Title/)).toBeInTheDocument();
expect(getByText(/Description/)).toBeInTheDocument();
});

In this example, we have defined a simple component called Example. We have also created a test using the test function from Jest, which is a popular JavaScript testing library.
The test uses the render function from the react Testing Library to render the Example component with some props. It then uses the getByText function from the library to find the elements with the text Title and Description in the rendered component. Finally, it uses the Jest expect function to check that the elements are in the document.
Querying Elements
It provides a number of query functions that you can use to find elements in your components. Some of the most common functions include the following:
getByText: Finds an element with the given text.
getByLabelText: Finds a label element with the given text and returns the associated input element.
getByRole: Finds an element with the given role.
getByTestId: Finds an element with the given data-test id attribute.