Testing Your Frontend

In this chapter, we’ll implement tests to verify the task manager’s frontend features we implemented in the previous chapters. We’ll start with an overview of what you need to test JavaScript frontend applications. Then, we’ll learn how to implement tests for your React components and verify that our frontend routing solution and its configuration work as expected. Next, we’ll implement tests that focus on verifying the application’s features as experienced by its users and learn how to run the test suite from the command line.

By the end of this chapter, you should be able to implement unit and integration tests for your JavaScript frontend applications based on React, React Router, and Redux Toolkit. Providing tests for your applications will help you build solid and reliable software and minimize its maintenance effort in the future.

We will be covering the following topics in this chapter:

• Testing frontend...

Technical requirements

You will need the latest Node.js LTS version (16.15 at the time of writing).

You can download the full source code for this chapter at https://github.com/PacktPublishing/Full-Stack-Quarkus-and-React/tree/main/chapter-10.

Testing frontend applications overview

The main requirement when testing frontend applications based on JavaScript is having an engine that runs the tests for you. There are plenty of test runner alternatives to choose from – Mocha, Ava, and Jazmine, just to name a few. However, in Chapter 7, Bootstrapping the React Project, we created our frontend project by leveraging Create React App, which uses Jest as its test runner, and this is the one we’ll be using for our project. Jest is one of the most popular and widely adopted JavaScript testing frameworks. It’s not only a test runner, but a full-featured framework with features and tooling for mocking, assertion, verification, and so on.

One of the crucial parts of frontend testing is verifying that the page elements render correctly in the browser. This is especially critical with React since this library is all about components and managing their state. Enzyme was one of the main tools to test the React components...

Testing React components

Depending on the complexity of your components and their purpose, it might be advisable that you implement specific unit tests for them. This ensures the component behaves according to specification for every defined scenario and property.

Unit testing

Unit testing is a software development technique by which developers write automatic tests that verify that the smallest testable units of an application (called units) behave according to its design requirements.

Let us see a practical example by implementing a test for the CompleteChip component. In the Implementing a Task Edit dialog section in Chapter 9, Creating the Main Application, we created this custom component that renders the completion date of the provided task, or nothing if the provided task is not completed. To implement the test for this component, we’ll start by creating a new CompleteChip.test.js file in the src/tasks directory.

Test file naming

By default, Jest, with...

Testing the router

In the Adding routing section in Chapter 7, Bootstrapping the React Project, we included React Router in our project to provide a routing solution for our application. Then, in the Adding the task pages to the application router section in Chapter 9, Creating the Main Application, we configured the definitive routes for the task manager. Just like any of the application’s features, these routes should be tested to make sure they follow the specifications and that they don’t break in the future.

To be able to properly test the application routes, we’ll need to be able to render complete application pages that require a Redux store configuration and an MUI theme provider. Let us create some utilities that will allow us to provide these settings in our tests.

Testing helpers

To host the testing helper files in our project, we’ll create a new src/__tests__ directory that will allow us to clearly distinguish this code from the production...

Testing the application’s features

When implementing an application, especially if you’re following a test-driven development (TDD) approach, it might be more interesting to write tests that verify the behavior of an actual application feature from the user’s perspective rather than specific units of code from a component’s technical perspective. The resulting tests will provide value from a business point of view and ensure, in an automated and sustainable way, that the application as a whole behaves according to what was requested in its specification. For this purpose, we’ll create the following files:

• src/auth/auth.test.js
• src/projects/projects.test.js
• src/tasks/tasks.test.js
• src/users/users.test.js

Each of these files will contain tests that verify the application’s features related to its containing module work as expected. For example, the users.test.js file contains tests that verify the task manager’...

Running the tests from the command line

So far, we’ve been running the tests from IntelliJ, which provides a convenient way to run a single test or a complete test suite. However, you might not be using IntelliJ, or even if you do, it’s always important to know how to execute the tests using the command line. This is also the way you’d configure the test execution in a CI pipeline.

Our application was bootstrapped using Create React App, and one of its main features is the provision of scripts for your application that you don’t need to maintain. This is the case for the test scripts too, which are linked in the package.json file as we can see in the following screenshot:

Figure 10.6 – A screenshot of the beginning of the scripts section in package.json

In the Testing helpers section, we added some testing helper files to a directory named __tests__. Unfortunately, Jest treats these files as tests too by default. We’...

Summary

In this chapter, we learned how to write tests for our JavaScript frontend application based on React, React Router, and Redux. We also provided complete test coverage for the task manager’s features by implementing a complete portfolio of unit and integration tests. We started by learning about the required and recommended dependencies to implement our tests and added the missing ones. Then, we developed tests for our React components and our React Router configuration. We also wrote tests to verify the application’s features from a user perspective and learned how to run them from the command line.

You should now be able to implement tests for your JavaScript frontend applications based on React, React Router, and Redux Toolkit using Jest, MSW, and React Testing Library. In the following chapter, we’ll integrate the frontend and backend projects and create an API gateway in Quarkus so that the frontend application can be served from the backend.

...

Questions

1. What’s the purpose of Jest’s describe function?
2. How many times will the beforeAll function execute when running a complete test suite?
3. Can you run asynchronous tests in Jest?
4. What function would you use to emulate a user typing into a text field?
5. How can you calculate the code coverage of your tests?