Frontend Weekly
Published in

Frontend Weekly

Getting Started With React Testing | The Approach.

Why will I test a code with code? says me some years ago. Back then it looked hilarious and unreasonable, I was just concerned about my code working and rendering well.

Over the years I have been hearing testing as part of the qualities of being a mid to senior developer and of course it’s something you have to learn if you want to be one.

Follow me in this article to learn why you should test and the approach that has helped me to test.

In my next article on testing, I will talk deeply about the type of tests, test tools and how and what to test.

Why Should You Test?

I was probably like you some years asking why must I test my code and even test it with another code at that? My app is working fine so what is the point of testing?

The question is, how do you know your app is working fine? This is where testing comes in.

The purpose of testing is to give you the confidence the app is working correctly.

If all the important application areas are properly tested, you will quickly get feedback when something is broken in your code.

Types of Tests

A deeper explanation will be done in my next article on these types of tests but this will give you an overview of them.

  1. Unit Test: This is the process of testing each unit of software. An example is testing a function that adds two parameters.
  2. Integration Test: It is the process of testing the interface between two software units or modules, like testing the UI(user interface) of a software. Unit testing might not be suitable to test interfaces, so it’s better to use an integration test.
  3. End-to-end Test: Also known as an e-2-e test is a higher level of testing. It tests from the front end-to back -end. They are tests executed running full-stack applications including servers and databases.

The Approach

This approach is an approach that has worked for me in testing react application, I welcome more opinions but I will be sharing how I got to understand testing after a long time of running away.

My most go-to approach in testing is testing like a user. You test according to what you want the experience of the user to be.

Testing can be scary because it’s a new environment entirely, but thinking like a user while testing will help you know what to test and how to test it.

For example, let us test a Search Input.

The integration test will look like the following: Find the search input and enter a value. Find the button and click it. After the button is clicked, check if the API request was sent to render the result. Then check if the result was rendered.

Looking at the analysis above, it’s similar to the experience of a user. A user will go to this app, type a keyword in the search input, click on the search button, a loading… text will show up to show that the images are coming up, then see the result rendered.

Explicit right? I believe thinking like a user will help simplify what to test and make it easier to know what to test.


This has helped us simplify what you will test, then we need to know how we will test it.

In my next article, we will talk about how to test and some testing tools. I hope you find this article helpful.

Follow me on Twitter for more tips on frontend and soon blockchain.




It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at

Recommended from Medium

Insights of Eloquent_JavaScript Chapter 1

Effective Refactoring: Part 1

devera Thanks for Following us on Twitter!

Write a mini react-router-dom (v5)

Managing local state with the React Context API and Typescript

What are Javascript classes? A basic introduction

Should I Use Apollo for GraphQL?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Grace Omole

Grace Omole

More from Medium

Netlify. How to deploy React.js or Storybook app.

How to Create hello world react application?

onMouseEnter and onMouseLeave — A simple way to hover in React

How to implement React Table Project Setup and useTable