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
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.

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

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

4. Output

Run the following command to test the cases.

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! ☕

Leave a Reply

Your email address will not be published. Required fields are marked *