Testing in React Applications

In the fast-paced world of web development, creating robust and reliable applications is crucial. One of the key practices that contributes to the success of a React project is effective testing.

Types of testing:

1. Unit Testing
2. Integration Testing
3. End-to-End Testing

Unit Testing

• It tests the react components in isolation. In other words, if we test a unit of our code (i.e. Header component) then it is called Unit Testing.

Integration Testing

• There are multiple components, and they interact with each other. We will develop a flow of an action in our application that we have to test, and this is known as integration testing.

End to End Testing

• This test is described as a user landing on a page to leave a page, i.e., the user enters an email ID and password, clicks on a button, or navigates to another page. This is known as integration testing.

As a developer, we are majorly concerned about 1st 2 tests.

Library for testing

• React Testing Library : https://testing-library.com/docs/react-testing-library/intro/

React testing library uses jest behind it. And Jest used Babel inside it. So we have to install and configure Babel dependencies in our application.

Types of Queries

Single Elements

• getBy...: Returns the matching node for a query, and throw a descriptive error if no elements match or if more than one match is found (use getAllBy instead if more than one element is expected).
• queryBy...: Returns the matching node for a query, and return null if no elements match. This is useful for asserting an element that is not present. Throws an error if more than one match is found (use queryAllBy instead if this is OK).
• findBy...: Returns a Promise which resolves when an element is found which matches the given query. The promise is rejected if no element is found or if more than one element is found after a default timeout of 1000ms. If you need to find more than one element, use findAllBy.

Multiple Elements

• getAllBy...: Returns an array of all matching nodes for a query, and throws an error if no elements match.
• queryAllBy...: Returns an array of all matching nodes for a query, and return an empty array ([]) if no elements match.
• findAllBy...: Returns a promise which resolves to an array of elements when any elements are found which match the given query. The promise is rejected if no elements are found after a default timeout of 1000ms.
• findBy methods are a combination of getBy* queries and [waitFor](<https://testing-library.com/docs/dom-testing-library/api-async#waitfor>). They accept the waitFor options as the last argument (i.e. await screen.findByText('text', queryOptions, waitForOptions))

Summary Table:

Let’s take an Example of Unit Testing:

//------------Contact-omponent-----------------------

const Contact = () => {
  return (
    <div>
      <h1 className="font-bold text-3xl p-4 m-4">Contact Us Page</h1>
      <form>
        <input
          type="text"
          className=" border border-black p-2 m-2"
          placeholder="name"
        />
        <input
          type="text"
          className=" border border-black p-2 m-2"
          placeholder="message"
        />
        <button className=" border border-black p-2 m-2 bg-gray-100 rounded-lg">
          Submit
        </button>
      </form>
    </div>
  );
};
export default Contact;

//-----------------------Testing page of contact-component-------------------

import { render, screen } from "@testing-library/react";
import Contact from "../Contact";
import "@testing-library/jest-dom";

describe("Contact Us Page Test Case", () => {

  it("Should load contact us component", () => {
    render(<Contact />);

    const heading = screen.getByRole("heading");

    // Assertion
    expect(heading).toBeInTheDocument();
  });

  it("Should load button inside Contact component", () => {
    render(<Contact />);

    const button = screen.getByRole("button");

    // Assertion
    expect(button).toBeInTheDocument();
  });

  it("Should load input name inside Contact component", () => {
    render(<Contact />);

    const inputName = screen.getByPlaceholderText("name");

    // Assertion
    expect(inputName).toBeInTheDocument();
  });

  it("Should load 2 input boxes on the Contact component", () => {
    render(<Contact />);

    // Querying
    const inputBoxes = screen.getAllByRole("textbox");

    //console.log(inputBoxes.length);

    // Assertion

    expect(inputBoxes.length).toBe(2);
  });
});

For more details, you can check the official website of the react-testing Library: https://testing-library.com/docs/react-testing-library/intro/