Automating React App Part 1: Real World App (RWA) walkthrough and setup

Photo by Lauren Mancke on Unsplash

Automating React App Part 1: Real World App (RWA) walkthrough and setup

Avishek Behera's photo
Avishek Behera
·

3 min read

Table of contents

💡
This article is the first part of the series React App Test Automation Using Java-Rest Assured-Selenide

Objective of this series

I always wanted to share my experience in testing and automation in the most practical way possible. I was holding off myself because I felt there was already so much content available over the internet by many amazing people.

However, I observed that most of the content that I know of is great with tools and tech but lacks in the actual use cases. It is like teaching you how to aim and shoot with various guns but not teaching you when and what situations to use.

I thought to use a close-to-real application built with a modern tech stack and explore them as we do in our testing activities and then automate by building a solution.

In this context, I will be using Java toolsets, because most of my expertise comes from Java, but it is not limited or the only solution. One can use better tools and strategies to solve the same problem. The objective here is to build a solution using a real-world application. I will cover the details of the tech stack I will be using in future articles.

Let's talk about the application under test (AUT)

The Real World App is a payment application that allows users to sign up for an account, add a bank account and send/receive money between friends.

Techstack

🛠 Built with React, XState, Express, lowdb, Material-UIand TypeScript⚡️ Zero database dependencies 🚀 Full-stack Express/React application with real-world features and tests 👮‍♂️ Local Authentication 🔥 Database Seeding with End-to-end Tests 💻 CI/CD.

Why did I choose this application?

  • Most of the websites or APIs that are available for practice either have only frontend ( No API available to control) or have only API (No real use case of being implemented in frontend), also are very straightforward and not built using modern tech stack.

  • But RWA is built using a fairly modern tech stack.

  • Use cases are very much related to real-world scenarios.

  • Does not seem to be straightforward, thus giving good learning and enough context for using the application to explore and automate.

  • A full stack application with both Backend ( API) and Frontend ( Responsive ).

  • The source code is open source and, hence can be modified based on need.

  • Easy to set up and use on local as well as on CI.

Now let's jump into setting up the application

  • Setting up the application on the local machine or cloud is super easy and painless, thanks to modern tech.

  • You can find the detailed steps in the RWA repository

  • For simplicity, let me add the minimal steps to get you started without spending much time on documentation

    1. Install node js ( Refer here for which version to install )

    2. Install yarn classic : npm install yarn@latest -g

    3. Clone the repository

    4. Run the command yarn from the root directory of the cloned project to install dependencies

    5. Once done, simply run yarn dev and it should start the application (both frontend and backend on localhost ports ). You should get a console log something similar to below:

    6. Now fire up a browser and navigate to http://localhost:3000 and you should see a login page.

Wrapping up

  • Now that the application is up and running, we will explore the application and document some observations and user flows in the next article.

References and Credits :

test-automation