Frontend Testing Techniques

Focusing on understanding the most commonly used frontend testing practices

Nowadays, there are several types of frontend testing techniques that we could use to make sure that our code is working as expected or not. Although there is confusion among developers, they usually mix up and consider different ways of frontend testing as equal, which is not valid.

After having conversations and discussions, I have realized and come to the point whether a Junior-level or Senior-level engineer has some experience with testing an application on the frontend side. When it comes to distinguishing between testing approaches, then they usually tangle between different techniques.

Therefore, in this article, we will see how the testing practices differ from each other. Likewise, we will see how to make them beneficial for our application. This article is more or less about testing frontend app development, so we will also see how we could use testing tools or frameworks in our frontend project.

📔 Frontend Testing

Frontend testing is basically used to validate the entire application’s functionality, usability, visibility, and how it looks to end-users. It usually involves validating UI elements, interaction with 3rd party APIs, components, etc of the application that is visible to end-users.

ℹ️ A Comprehensive Guide to Front End Testing | Perfecto by Perforce

In this article, we will be covering below testing practices:

• Unit Tests
• Integration Tests
• Visual Regression Testing
• Acceptance Tests
• End-to-End Tests
• Performance Tests

Now, let’s dive into the understanding of these testing practices.

🔥 Unit Tests

Unit test is the lowest level of testing of any application’s source code. The unit tests should test individual components, UI element actions, and functions of a class, and they should only test isolated parts of the code without any dependency from another segment or external API calls.

For React-based apps, we have the two most prominent and recommended tools React Testing Library and Jest, as mentioned here Testing Overview — React.

I would immensely recommend Getting Started · Jest as it is typically used on most projects, and more importantly, it is maintained by a team of engineers from Facebook. Therefore, in the longer term, we could easily find support for it. A straightforward example of how to write a test in Jest is below:

Example:

The function that we want to test here is whether arguments “a” and “b” are summing up and returning the value or not.

The actual Jest test checks if we pass (1, 1) as arguments to add method, the expected outcome should be equal to 2. if the result is 2, we have successfully passed the test case, and if we assert another number except 2, that means our test case got failed.

ℹ️ Resources:

To understand unit testing tools in-depth, I would highly recommend checking the below links:

• React Testing Library | Testing Library
• Getting Started · Jest

🌿 Integration Tests

Integration tests validate different services and components working together in the application, and it ensures, that several parts of the application work together.

For the frontend integration tests, we ought to render the entire component within the Document Object Model (DOM). We have two substantial libraries, such as React Testing Library and Enzyme from Airbnb.

ℹ️ Resources:

For integration tests, you could refer to the below links:

• Introduction · Enzyme
• React Testing Library | Testing Library

🌀 Visual Regression Testing

Visual regression tests execute whenever there is a change in the application, but these tests are unique to the front end. This type of testing focuses on the interface of the application by taking multiple screenshots within a headless browser, and once the change has occurred in the system, the visual regression testing starts comparing different snapshots in order to detect the differences.

Storybook is also a good example of visual regression testing. These tests can also be auto-performed by jest-image-snapshot or Cypress Visual Regression.

Following are some recommended paid and open source tools for visual regression testing:

• All-in-one visual testing and review platform | Percy
• Automatically review, test, and document Storybook by the maintainers of Storybook
• GitHub — oblador/loki: 👁 Visual Regression Testing for Storybook
• GitHub — mjhea0/cypress-visual-regression: Module for adding visual regression testing to Cypress

ℹ️ Resources:

• Visual Testing | Cypress Documentation
• Visual Regression Testing
• React Design System — Visual Regression Testing

📣 Acceptance Tests

Acceptance tests are performed to ensure whether all business requirements of a system are satisfied or not. By performing acceptance tests, the primary prerequisite is to check the entire application is up and running smoothly and replicate all the user behaviors as expected, and these tests can also reject specific changes based on the performance.

Nightmare is quite an impressive tool for the acceptance tests, and to read in detail about acceptance tests for a frontend application npm: nightmare.

This article Acceptance Testing React Apps with Jest and Nightmare | Viget is a bit old now but still worthy enough to read and learn how to add acceptance tests in the application.

ℹ️ Resources:

• UI testing with Nightmare

🎓 End-to-End Tests

End-2-End testing is a technique used to replicate the user behavior with the help of tools or software in the application. In simple words, a methodology to test the complete flow from start to end in the application.

The purpose of having E2E tests can be as simple as possible such as loading the application or a web page, signing in or out, clicking buttons, sending emails, redirecting to other pages, etc.

E2E tests are considered valuable, but in addition, they are expensive as well, and sometimes hard to maintain. As per recommendations from several developers and engineers, it is sufficient to have various unit and integration tests rather than having a bunch of E2E tests.

As per my understanding, the reason behind having fewer E2E tests is that a developer needs intact knowledge of the application and knows how to write quality E2E tests. E2E tests can also take a long execution time (meaning the outcome of results will be slower). Sometimes testing negative flow is also crucial if tests integrate with endpoints (APIs).

Some of the major JS frameworks available for E2E testing are listed below.

• What is Nightwatch? | Developer Guide | Nightwatch.js
• Why Cypress? | Cypress Documentation
• selenium-webdriver
• Getting Started | Docs
• Getting Started | WebdriverIO

In our application, we are mostly using Cypress for E2E testing, and the simple example of writing a test in Cypress is below:

ℹ️ Resources:

• Why Cypress
• Cypress.io — End to End Testing Framework

🔅 Performance Tests

Performance tests check the system’s behavior when it is underneath a significant load. These tests are non-functional and may have several methods to comprehend the reliability and stability of the application.

For instance, if a high number of requests are executed, it can be noticeably increased response time. Performance tests are relatively costly to implement and operate, but they can help you understand if new changes make your system polluted.

In React-based applications especially, the report vitals play an essential role in measuring the application’s performance and sending any results to an analytics endpoint to track the actual user performance.

There are other tools/packages for optimizing the performance of React applications, such as profiler, bit.dev, react developer tools, why-did-you-render, and performance timeline (browser profiling). 5 Recommended Tools for Optimizing Performance in ReactJS

ℹ️ Resources:

• Performance Tools — React
• Measuring Performance | Create React App
• Load Testing Applications Written in React.js — LoadView
• GitHub — keiya01/react-performance-testing: A library to test runtime performance in React

💨 Smoke Tests

Smoke tests are basic tests that check the basic functionality of the application. They are meant to be quick to execute, and their goal is to give you the assurance that the major features of your system are working as expected.

Smoke tests can be useful right after a new build is made to decide whether or not you can run more expensive tests, or right after a deployment to make sure that the application is running properly in the newly deployed environment.

According to Microsoft Guidelines for Smoke Testing, these tests are “the most cost-effective method for identifying and fixing defects in software”.

Here What is Smoke Testing? Build Verification Tests Explained With Examples we can find more about smoke testing and how we could write some smoke tests for our application. As in the above link, the package QA Wolf is being used for writing smoke tests.

ℹ️ Resources:

• Why QA Wolf?
• What is Smoke Testing? | Smoke Testing Example | Software Testing Tutorial for Beginners | Edureka

Interested in other types of testing techniques then read this article

The Complete Guide to Different Types of Testing | Perfecto by Perforce