How to write unit test cases using React Testing Library

Today we’ll show you how to write unit test cases using React Testing Library.

React Testing Library is the most popular and very lightweight library to write test cases for React components.

We have to use the jest-dom that is an associate library for the Testing Library that provides custom DOM element matchers for Jest.

Both packages are pre-installed when you create an application using the `create-react-app` package.

Output: Unit Testing

Output - How to write unit test cases using React Testing Library - Clue Mediator

Unit test using React Testing Library

1. Create a react application
2. Create a counter application
3. Write test cases
4. Output

1. Create a react application

We have to create a react application using the `create-react-app` package. Run the following command to create an application.

npx create-react-app test-react-app

2. Create a counter application

Let’s create a simple counter application where we will have the following elements.

• Title of an application
• Powered By text
• Powered By link
• Counter value indicator
• Increment & Decrement buttons

Look at the following code to integrate the counter application.

App.js

import { useState } from 'react';
import './App.css';

function App() {
  const [counter, setCounter] = useState(0);
  return (
    <div class="App">
      <h1>Counter Application</h1>

      <small>Powered By <a href="https://www.cluemediator.com/" target="_blank" title="Clue Mediator" data-testid="powered-by" rel="noopener noreferrer">Clue Mediator</a></small>

      <h2 class="counter" data-testid="counter-text">{counter}</h2>

      <button onclick="{()" ==""> setCounter(prevCounter => prevCounter + 1)}
        data-testid="btn-increment">
        Increment
      </button>
      <button onclick="{()" ==""> setCounter(prevCounter => prevCounter - 1)}
        data-testid="btn-decrement">
        Decrement
      </button>
    </div>
  );
}

export default App;

3. Write test cases

Now, we will write test cases for the `App.js` component. We have configured the application through the `create-react-app` so we don’t need manual installation for React Testing Library. You can install the `jes-dom` and `react-testing-library` for the manual configuration.

Here, we will use the `describe` method for the grouping the test cases and `test` method to describe the case.

We will test the following use case for the `App.js` component.

• render the title of an application

  Assert

  • The title should be in the document

• render the Powered By text

  Assert

  • The Powered By text should be in the document

• render the Powered By link

  Assert

  • Powered By link should have a title attribute
  • Powered By link should have a href attribute and it has `https://www.cluemediator.com/` value

• render initial counter text

  Assert

  • Counter text should have `counter` class
  • Counter text should have `0` value

• render buttons

  Assert

  • The Increment button should be in the document
  • The Increment button should contain "Increment" text
  • The Decrement button should be in the document
  • The Decrement button should contain "Decrement" text

We will recommend you to check the jest-dom custom matchers and Queries for test cases.

Here, we will use the `render` and `screen` methods to load and query the element in the dom for testing. Check the following code.

App.test.js

import { render, screen } from '@testing-library/react';
import App from './App';

describe("<app>", () => {

  test('render the title of an application', () => {
    render(<app>);

    const titleEl = screen.getByText(/Counter Application/);
    expect(titleEl).toBeInTheDocument();
  });

  test('render the Powered By text', () => {
    render(<app>);

    const poweredByEl = screen.queryByText(/powered by/i);
    expect(poweredByEl).toBeInTheDocument();
  });

  test('render the Powered By link', () => {
    render(<app>);

    const poweredByLink = screen.getByTestId("powered-by");
    expect(poweredByLink).toHaveAttribute("title");
    expect(poweredByLink).toHaveAttribute("href", "https://www.cluemediator.com/");
  });

  test('render initial counter text', () => {
    render(<app>);

    const counterText = screen.getByTestId("counter-text");
    expect(counterText).toHaveClass("counter");
    expect(counterText).toHaveTextContent("0");
  });

  test('render buttons', () => {
    render(<app>);

    const btnIncrement = screen.getByTestId("btn-increment");
    const btnDecrement = screen.getByTestId("btn-decrement");

    expect(btnIncrement).toBeInTheDocument();
    expect(btnIncrement.textContent).toEqual("Increment");

    expect(btnDecrement).toBeInTheDocument();
    expect(btnDecrement.textContent).toEqual("Decrement");
  });

});
</app></app></app></app></app></app>

4. Output

Run the following command to test the cases.

npm test

I hope you find this article is helpful.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

GitHub Repository