How to write unit test cases using React Testing Library

by Clue Mediator · February 22, 2021

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 — Output – How to write unit test cases using React Testing Library – Clue Mediator

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

1	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 className="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
        className="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;

import { useState } from 'react';

import './App.css';

function App() {

const [counter, setCounter] = useState(0);

return (

<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

className="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");
  });

});

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");

});

4. Output

Run the following command to test the cases.

npm test

npm test

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

Demo & Source Code

GitHub Repository

If you found value in this article,
you can support us by buying me a coffee! ☕

How to write unit test cases using React Testing Library

Output: Unit Testing

Unit test using React Testing Library

1. Create a react application

2. Create a counter application

3. Write test cases

4. Output

Demo & Source Code

You may also like...

Leave a Reply Cancel reply

Search your query

JOIN OUR NEWSLETTER

Recent Posts

Join us

How to write unit test cases using React Testing Library

Output: Unit Testing

Unit test using React Testing Library

1. Create a react application

2. Create a counter application

3. Write test cases

4. Output

Demo & Source Code

You may also like...

Test an input field using the React Testing Library

Check a Checkbox using React Testing Library

Test an onClick event using the React Testing Library

Leave a Reply Cancel reply

Search your query

JOIN OUR NEWSLETTER

Recent Posts

Tags

Join us