Ancora Imparo - I'm still learning (Michelangelo at 87)

No code Automated Testing for React Application (Case Study)

Introduction

React is the most popular JavaScript framework on the internet. According to a survey by statista.com, 36% of web developers use React to develop web and mobile applications. React is currently being used in websites of popular brands such as Netflix, Google, Facebook, Quora, Instagram, Gitlab, and Yahoo.

React has also been referred to as the “future of frontend development” because it is easy to learn, deploy, and leverages Flux design pattern to manage client and server side interaction which is different and more effective than the old Model-View-Controller (MVC) design pattern. Hence, it is projected that more web and mobile applications will be developed with this frontend framework in the future.

There’s no doubt that testing plays a major role in the efficient development of web and mobile applications written with React. With Testup’s Automated testing, developers can save time and stress writing tests for all the features of their web and mobile application, no coding required.

In this article, we would be using Testup to perform Automated Testing for a React-based web application.

Testing a React-based Web application (Netflix)

Netflix, the world’s most popular movie-streaming platform was built with React. You can confirm this by simply searching for and installing the React Developer Tools extension for Google chrome.  Visit https://netflix.com and you will see the React icon appear as active. That is an indication that React was used to build Netflix as seen in Figures 1a and 1b.

Figure 1a
Figure 1b

Now let’s get started with testing the web application.

Step 1: Set Up the Test

Signup or Login to your Testup account. Click on Go to App, which is displayed at the top right-hand corner of the page. Then, click Create Project; afterward, click Create Test. Complete the necessary details requested under the Settings tab. These include the website’s URL and the name of the test case. For this test, the name of my test case would be ‘Testing Netflix Website’ and the website URL will be https://netflix.com.

Figure 2

After this, click Edit to begin the testing. The testing page appears as follows; with the Netflix website loaded on the left-hand side while the Actions list is on the right-hand side. The editor menu appears at the top.

Figure 3

Step 2: Start Testing

Recording a test usually starts with a check to see if the website was properly loaded. To do this, you can select an anchor area on the website and click play as check. However, because Netflix website has a disclaimer popup that shows upon load, we would be testing our anchor area with that. Click/drag on the close icon then click play as check as seen in figure 4.

Figure 4

Notice that the disclaimer popup closes after this has been done as seen in Figure 5 below

Figure 5

Now let’s check if the text input field and buttons on the page are working. To do this, we select click/drag on the text input field.

Afterwards, we can enter a value in the text input field by typing an email address, say jamiu@testup.io, and pressing the Enter key in the Editor Menu above.

Figure 6

We notice that the page then changes to the next page of the onboarding process as shown in Figure 7 below. This indicates that the text input field is active and is working.

Figure 7

I would also like to test if the scroll bar of the Netflix website works. To do this, I click/drag on the scrollbar on the far right side of the website. The line between the two circles shows where I am scrolling from to where I wish to scroll to as seen in Figure 8.

Figure 8

Afterwards I click on play it or wait for the action to be played automatically. Notice that the view changes from one part of the website to another. Hence, we can verify that the scroll bar for the website works as there is a navigation to another part of the website as seen in Figure 9.

Figure 9

Step 3: Automate the Test

Finally, you can get previously executed tests to run automatically. To do this, navigate to the Editor Menu and click on the Play button and then press the replay icon button. All previously executed test will then execute on their own automatically.

Figure 10

Conclusion

To perform testing in React applications, developers often use 3rd party dependencies such as Mocha or Jest. However, for most React developers, testing code is usually a very boring, time-consuming, and stressful process. This is because it deviates from the design and implementation of user interface components which is the fun part of frontend development. With Automated Testing, you can bypass the downtime of testing and still make your coding experience fun.  Fortunately, tools like Testup offers an affordable option without compromising the quality of the test. Getting started is easy, and you can start with a free trial; click here to get started.

About the Autor

Jamiu Idowu

Jamiu Idowu

Entrepreneur seeking to shape the world through IT and emerging technologies. Enjoys research and technical writing, and can serve as a bridge between technology and its users.

Liked this article?

We have a lot more where that came from!
Join the subscribers who stay ahead of the pack.

By entering your email, you agree to our Terms of Service and Privacy Policy.