React30-Part24: Writing test cases with react-testing-library

Title image

What is React Testing Library?

React Testing Library is a testing utility for React that encourages testing components the way users would interact with them. It provides a set of helper functions to render components, query elements, and simulate user interactions.

Why Use React Testing Library?

• Emulates how users interact with your application, leading to more meaningful tests.
• Encourages testing behavior over implementation details, making tests more maintainable.
• Well-suited for accessibility testing, ensuring your application is usable by all.

Installing React Testing Library

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

Basic Configuration

Set up a basic Jest configuration to use React Testing Library. Update package.json:

"scripts": {
  "test": "react-scripts test --env=jsdom",
  "test:coverage": "react-scripts test --coverage"
},
"jest": {
  "testEnvironment": "jsdom",
  "setupFilesAfterEnv": ["@testing-library/jest-dom/extend-expect"]
}

Writing Your First Test

In this section, we’ll delve into the fundamentals of writing tests with React Testing Library. We’ll cover how to render components, query elements, and make assertions.

Rendering Components

The first step in testing a React component is to render it. React Testing Library provides the render function for this purpose.
In this section, we’ll explore how to write tests with React Testing Library. We’ll use a simple component, App.js, for demonstration purposes.

export default function App() {
  return (
    <div className="App">
      <h1>Hello World</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Writing the Test:

To begin, we need to write a test for the App in App.test.js:-

import React from "react";
import { render } from "@testing-library/react";
import "@testing-library/jest-dom";
import App from "./App.js";

test("renders MyComponent", () => {
  // Render the component
  const { getByText } = render(<App />);

  // Use getByText to query elements
  const textElement = getByText(/Hello World/i);

  // Perform assertions
  expect(textElement).toBeInTheDocument();
});

Breaking Down the Test:

Rendering the Component: We use render from React Testing Library to render our AppComponent.

Querying Elements: We use getByText to find an element containing the text "Hello World". The regular expression /Hello World/i performs a case-insensitive search.
Making Assertions:
We use expect to make an assertion that the textElement is in the document.

Running the Test:

When you run this test, it should pass, indicating that the component is rendering correctly.

You can find live code below:-

Codesandbox

Conclusion

This example demonstrates the basics of writing a test with React Testing Library. As you work with more complex components and interactions, you can explore additional query functions and assertions provided by the library. Remember to focus on testing user interactions and behaviors to ensure your components work as expected. We will cover more examples in upcoming articles. Have a nice day ahead!

Check out my Youtube channel for more content:-
SaurabhNative-Youtube

Next part in the series in which we cover simulating clicks and events, testing input and forms, and navigating and routing.

React30-Part25