How we Unit Test our Front End Code to Improve the Code Quality

Introduction

The frontend team at Cashfree Payments works on some incredible projects while balancing the evolving needs of our users. We use React for frontend development and various tools for Unit Tests. Unit Testing ensures that there are no complications or issues when releasing new code to production. This blog post describes the tools and methods that we put to use.

In Javascript, a unit is a function; a function can be any small chunk of utility code or a component. The main objective of unit testing is to isolate written code to test and determine if it works as intended. Also, unit testing fixes bugs in the very early stages of development, ensuring that very few bugs occur in subsequent stages of testing.

React Testing Library

React Testing Library (RTL) is a library used to test the DOM tree which React renders on the web. The main motive of this library is to write refactorable code (test cases) without relying on implementation details. Jest and other testing tools eventually tested the component’s internal behavior. RTL is a DOM testing library mostly used to test DOM elements and how they behave on the web. It is used to test from an end-user point of view.

JEST

Jest is a Javascript testing framework that developers use to test the JS code which is written in React. It is used to build isolated test cases, snapshots, mock functionalities, etc.

The importance of Unit Testing for Front End Developers

Unit testing is essential for any front end application, testing your components and features against how you expect them to behave in production, resulting in a stable codebase and a reliable app for your customers. Also, there are added advantages like –

• Unit Tests act as documentation and give a better understanding of the code.
• Improves code quality.
• It gives you confidence in the code you have written and to do major refactors.

The Three A’s of Unit Testing

Unit test cases are typically written using the standard three-step format of Arrange, Act, and Assert.

Arrange: Defining the variables, objects, and mock functions, as appropriate.
Act: The functionality you wish to test.
Assert: Verify your code works the way you want it to.

Note: The order of Arrange, Act, and Assert statements should be followed strictly in writing Unit Tests.

Testing Approaches

• Testing Utility Functions
• Testing Components

Testing Utility Functions

It will test the behavior of a utility or helper function. Let’s understand it with the help of an example.

The above helper function will convert an object into an array.

So we will test its functionality accordingly.

To improve the quality of our unit tests, our team follows these best practices when writing them: 

1. When you are writing test cases, you should make sure that you are taking into consideration all of the different possible scenarios. Don’t just try taking the easy way out
2. Be sure to give the test case an accurate name and description
3. When writing the unit tests, make sure to check for false positives and negative cases as well
4. Each test should concentrate on a single use case and confirm that the output is as expected for the corresponding piece of code
5. Mock the dependencies
6. Strive for the maximum possible test coverage

Testing Components

In this example, we will see how to test a React Component, its behavior, and so on. There are various ways to test React Components some are listed with examples here:-

• Shallow Renderer Testing
• Snapshot Testing
• DOM Testing

Shallow Renderer

Shallow rendering simplifies React unit testing. Shallow rendering lets you render a component “one level deep” and assert facts about its render method return without worrying about child components, which are not instantiated or rendered.

If your component accepts props (for example, functions), you can pass the Mock Function jest.fn() provided by Jest.

Snapshot Testing

Snapshot tests can help you avoid unexpected UI changes.

Snapshot test cases render a UI component, take a snapshot, and compare it to a reference snapshot file stored with the test. If the snapshots do not match, either the change was unexpected or the reference snapshot needs to be updated to the new UI component.

_snapshots_ folder will be created along with snapshot files while writing snapshot tests.

When to use Snapshot testing?

Snapshot testing is acceptable when your component has only one function or you want to ensure that your component is rendering, but it is not a replacement for a utility or component testing, which verifies that an application/portion of code is working properly.

DOM Testing

You’ll need to use DOM testing when you want to assert or manipulate the rendered component. For example, fire a click event and match text from a specific HTML tag or CSS style.

Example:

Let’s see how we have added DOM test cases for an Accordion component. In the Accordion component, we have three accordion items, and they are all closed by default. When we click on one of the closed accordions, it will open and show us more information.

So, let’s look at how we can use DOM testing in this example.

1. In the above example, we have used Styled Component and Theme, so we will wrap our component with ThemeProvider.
2. After that, we will click on the element by accessing its text using screen.getByText which is used to query inside the document.body (ref — Closed Accordion Image)
3. In Assert, we will verify whether it is a match or not. (ref- Opened Accordion Image)

Similarly, we can test for CSS styles using “toHaveStyle()” 

• We are testing for background color, as we have alternate #FFFFFF and #FAFAFA colors. 

Mocking with Jest

Mocking is a technique that replaces the dependencies with an object you can control.

Ways to Mock

• jest.fn() — mock a single function.
• jest.mock() — mock a module.

jest.spyOn() — captures information about function calls.

1. We are importing all the services which we have defined in the authentication.
2. Using ‘jest.spyOn()’ we are mocking our ‘sendDetails’ API and overwriting our response.
3. In the describe block, we are expecting our modified ‘sendDetails’ and passing params.

How Unit Testing helps us to improve Code Quality.

At Cashfree Payments, one of the places where unit testing comes to the rescue is to keep the functionality intact in an internal library project where multiple teams would contribute and consume. Each PR would have unit tests added to ensure the newly added functionalities work as expected and existing ones are not failing.

Conclusion

The Frontend Team at Cashfree Payments adheres to the best practices and methods for unit testing React/JavaScript code outlined above. It helped us gain confidence in the code and ensure that the releases went smoothly. When multiple developers are working on the same codebase, unit testing is essential to ensure that both new and old code works as expected.

Did this post intrigue you? If so, get in touch with us! We have some exciting opportunities in store for excellent engineers just like you!